I am making a site with a navbar, but when I resize the page, sometimes one link goes on an extra line like this: Navbar Example
How can I fix this? Here is my code:
body {
margin: 0;
background-color: white;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #F27930;
box-shadow: 5px 0px 0px 0px 5px lightgrey;
}
li {
float: left;
font-family: roboto;
color: white;
}
li a.link {
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
}
li a.current {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.divider {
display: block;
top: 50%;
font-size: 25px;
color: #FCD031;
text-align: center;
padding: 8px 2px;
text-decoration: none;
}
li a:hover {
background-color: #feae02;
}
li a.current:hover {
background-color: #F27930;
}
li a.divider:hover {
background-color: #F27930;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="sticky">
<ul>
<li><a class="current"><b>Jump to Article:</b></a></li>
<!-- <hr class="hrNav"> -->
<li><a class="link" href="#top">Top</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article1">Article 1</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article2">Article 2</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article3">Article 3</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article4">Article 4</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article5">Article 5</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article6">Article 6</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article7">Article 7</a></li>
</ul>
</div>
Any help would be much appreciated!
Thanks,
Jasper
The only way you can avoid the nav bar word wrapping is by setting a minimum width on the nav bar, or add a media query to change it when the screen is too small.
Using the min-width CSS attribute.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale-1.0">
<title>Navbar Example</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
background-color: white;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #F27930;
box-shadow: 5px 0px 0px 0px 5px lightgrey;
}
li {
float: left;
font-family: roboto;
color: white;
}
li a.link {
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
}
li a.current {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.divider {
display: block;
top: 50%;
font-size: 25px;
color: #FCD031;
text-align: center;
padding: 8px 2px;
text-decoration: none;
}
li a:hover {
background-color: #feae02;
}
li a.current:hover {
background-color: #F27930;
}
li a.divider:hover {
background-color: #F27930;
}
</style>
</head>
<body>
<div class="sticky">
<ul style="min-width:884px">
<li><a class="current"><b>Jump to Article:</b></a></li>
<!-- <hr class="hrNav"> -->
<li><a class="link" href="#top">Top</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article1">Article 1</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article2">Article 2</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article3">Article 3</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article4">Article 4</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article5">Article 5</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article6">Article 6</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article7">Article 7</a></li>
</ul>
</div>
</body>
</html>
That is a padding issue.
So, there'll be 2 solutions.
use #media to let the menu contains breadcrumb when the browser width is small.
if you're going to force display the navigation items by line breaking, then use flex
Just add 2 lines to your ul style
ul {
...
display: flex;
flex-flow: row wrap;
}
So, the final result will be
body {
margin: 0;
background-color: white;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #F27930;
box-shadow: 5px 0px 0px 0px 5px lightgrey;
}
li {
float: left;
font-family: roboto;
color: white;
}
li a.link {
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
}
li a.current {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.divider {
display: block;
top: 50%;
font-size: 25px;
color: #FCD031;
text-align: center;
padding: 8px 2px;
text-decoration: none;
}
li a:hover {
background-color: #feae02;
}
li a.current:hover {
background-color: #F27930;
}
li a.divider:hover {
background-color: #F27930;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="sticky">
<ul>
<li><a class="current"><b>Jump to Article:</b></a></li>
<!-- <hr class="hrNav"> -->
<li><a class="link" href="#top">Top</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article1">Article 1</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article2">Article 2</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article3">Article 3</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article4">Article 4</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article5">Article 5</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article6">Article 6</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article7">Article 7</a></li>
</ul>
</div>
Related
I want to remove the border that I have under the sub menu -"View All clients", "Add New Clients". any help would be really appreciated. The picture is attached here has the menu and sub-menu that I want to remove the border https://i.stack.imgur.com/GKLgZ.png
.help-left-menu {
list-style: none;
margin-top: 36px;
padding-left: 18px;
overflow: auto;
}
.help-left-menu li {
padding: 5px 8px;
border-bottom: 1px solid #CCC;
background: rgba(119, 140, 162, 1);
text-decoration: none;
}
.help-left-menu li {
list-style: none;
}
#dropdown-items {
display: none;
padding-left: 2px;
}
#dropdown-items a {
color: white;
}
.menu {
color: white;
}
.dropdown-list li a.active {
background: darkslategray;
border: 1px solid darkgray;
padding: 10px;
}
.tab-content {
display: none
}
.config-left {
margin-top: 36px;
}
.content-heading {
background-color: rgba(119, 140, 162, 1);
padding-top: 5px;
padding-bottom: 1px;
color: white;
align-content: center;
text-align: center;
}
.features {
padding-top: 4px;
padding-bottom: 10px;
color: white;
padding-left: 0px;
margin-left: 20px;
}
<ul class="help-left-menu">
<li class="dropdown-list">
<div class="features">
<h5>FEATURES</h5>
</div>
<a href="#" data-toggle="dashboard-content" class="dashboard menu
tab">DASHBOARD<i class="dropdown-icon"></i></a>
</li>
<li class="dropdown-list"><a href="#" data-toggle="new-proposal-
content" class="newProposal menu tab">NEW PROPOSAL<i class="dropdown-
icon"></i></a></li>
<li class="dropdown-list">PROPOSALS<i class="dropdown-icon"></i>
</li>
<li class="dropdown-list"><a href="#" data-toggle="client-
content" class="clients menu">CLIENTS<i class="dropdown-icon"></i>
<ul class="submenu" id="dropdown-items">
<li><a href="#" data-toggle="view-all-client-content"
class="view-allClients submenu tab">View All Clients</a>
</li>
<li><a href="#" data-toggle="add-new-client-content" class="add-
newClient submenu tab">Add New Clients</a>
</li>
</ul>
Use something like this:
.help-left-menu li {
border-bottom: 1px solid #CCC;
}
.submenu li {
border: 0;
}
.submenu a {
font-size: 40px;
color: red;
text-decoration: none;
}
<ul class="help-left-menu">
<li class="dropdown-list">
<div class="features">
<h5>FEATURES</h5>
</div>
<a href="#" data-toggle="dashboard-content" class="dashboard menu
tab">DASHBOARD<i class="dropdown-icon"></i></a>
</li>
<li class="dropdown-list"><a href="#" data-toggle="new-proposal-
content" class="newProposal menu tab">NEW PROPOSAL<i class="dropdown-
icon"></i></a></li>
<li class="dropdown-list">PROPOSALS<i class="dropdown-icon"></i>
</li>
<li class="dropdown-list"><a href="#" data-toggle="client-
content" class="clients menu">CLIENTS<i class="dropdown-icon"></i>
<ul class="submenu" id="dropdown-items">
<li><a href="#" data-toggle="view-all-client-content"
class="view-allClients submenu tab">View All Clients</a>
</li>
<li><a href="#" data-toggle="add-new-client-content" class="add-
newClient submenu tab">Add New Clients</a>
</li>
</ul>
If you have used border: none in your CSS selector, make sure to try adding !important or adding a higher specificity to it in case anything has higher specificity than it.
I am going nuts with the probably easiest css issue ever. I just want to add some margin between a <ul> and <li> element. I use a dropdown when hovered at a category.
I tried to add margin-top in each css class/element I have, but there is no effect at all. Do I miss a class here or is there any workaround solution?
This is what I thought is the working solution, but it doesn't append a margin:
#sidebar .subbar li:first-child {
margin-top: 10px;
}
Thanks in advance!
HTML:
<div id="sidebar">
<header>
Dasocc
</header>
<ul class="nav">
<li class="countries"><img src="{% static "images/germany.png" %}" alt="germany">1. Bundesliga
<ul class="subbar">
<li><a class="team" id="69">FC Bayern München</a></li>
<li><a class="team" id="70">Borussia Dortmund</a></li>
<li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
<li><a class="team" id="74">RB Leipzig</a></li>
<li><a class="team">VfL Wolfsburg</a></li>
<li><a class="team">SC Freiburg</a></li>
<li><a class="team">Eintracht Frankfurt</a></li>
<li><a class="team">Borussia M. Gladbach</a></li>
<li><a class="team">FC Schalke 04</a></li>
<li><a class="team">TSG 1899 Hoffenheim</a></li>
<li><a class="team">1. FC Union Berlin</a></li>
<li><a class="team">Fortuna Düsseldorf</a></li>
<li><a class="team">SV Werder Bremen</a></li>
<li><a class="team">1. FC Köln</a></li>
<li><a class="team">SC Paderborn</a></li>
<li><a class="team">FC Augsburg</a></li>
<li><a class="team">Hertha BSC Berlin</a></li>
</ul>
</li>
CSS:
/* Länderkategorien untereinander */
#sidebar .nav .countries {
padding-top: 10px;
}
/* hovered Team */
#sidebar .nav a:hover {
color: #FF5B5B;
font-size: 13px;
font-weight: bold;
background-color: #000481;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 0 0.4em #000481;
}
/* angeklicktes Team */
#sidebar .subbar .team.active {
font-weight: bold;
background-color: #000481;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 0 0.4em #000481;
}
/* Untermenü ausblenden, um dropdown Effekt zu aktivieren */
#sidebar .subbar {
display: none;
width: 100%;
padding-top: 15px;
}
/* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
display: table-row;
list-style: none;
}
/* Style Menüpunkte Countries */
.countries {
text-decoration: none;
color: #FFF;
font-size: 14px;
display: block;
border: none;
background: none;
cursor: pointer;
outline: none;
font-family: 'Muli', sans-serif;
}
/* Einzelne List-Container in Submenü */
#sidebar .subbar li {
height: 20px;
line-height: 20px;
display: inline-block;
width: 100%;
}
/* Einzelne Teamnamen in Submenü */
#sidebar .subbar .team {
display:table-cell;
font-size: 11px;
font-family: 'Muli', sans-serif;
padding-left: 33px;
padding-right: 5px;
}
´´´
This is due to the fact that on the :hover event you are displaying the <ul> as a table-row:
#sidebar .countries:hover .subbar {
display: table-row;
...
Actually, if you display it as a block then you will find that it displays with the margin you have specified, as you'd expect:
#sidebar .countries:hover .subbar {
display: block;
...
The below snippet shows it (although it renders poorly):
#sidebar {
background-color: blue;
}
/* Länderkategorien untereinander */
#sidebar .nav .countries {
padding-top: 10px;
}
/* hovered Team */
#sidebar .nav a:hover {
color: #FF5B5B;
font-size: 13px;
font-weight: bold;
background-color: #000481;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 0 0.4em #000481;
}
/* angeklicktes Team */
#sidebar .subbar .team.active {
font-weight: bold;
background-color: #000481;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 0 0.4em #000481;
}
/* Untermenü ausblenden, um dropdown Effekt zu aktivieren */
#sidebar .subbar {
display: none;
width: 100%;
padding-top: 15px;
}
/* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
display: block;
list-style: none;
}
/* Style Menüpunkte Countries */
.countries {
text-decoration: none;
color: #FFF;
font-size: 14px;
display: block;
border: none;
background: none;
cursor: pointer;
outline: none;
font-family: 'Muli', sans-serif;
}
/* Einzelne List-Container in Submenü */
#sidebar .subbar li {
height: 20px;
line-height: 20px;
display: inline-block;
width: 100%;
}
/* Einzelne Teamnamen in Submenü */
#sidebar .subbar .team {
display:table-cell;
font-size: 11px;
font-family: 'Muli', sans-serif;
padding-left: 33px;
padding-right: 5px;
}
<div id="sidebar">
<header>
Dasocc
</header>
<ul class="nav">
<li class="countries"><img src="" alt="germany">1. Bundesliga
<ul class="subbar">
<li><a class="team" id="69">FC Bayern München</a></li>
<li><a class="team" id="70">Borussia Dortmund</a></li>
<li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
<li><a class="team" id="74">RB Leipzig</a></li>
<li><a class="team">VfL Wolfsburg</a></li>
<li><a class="team">SC Freiburg</a></li>
<li><a class="team">Eintracht Frankfurt</a></li>
<li><a class="team">Borussia M. Gladbach</a></li>
<li><a class="team">FC Schalke 04</a></li>
<li><a class="team">TSG 1899 Hoffenheim</a></li>
<li><a class="team">1. FC Union Berlin</a></li>
<li><a class="team">Fortuna Düsseldorf</a></li>
<li><a class="team">SV Werder Bremen</a></li>
<li><a class="team">1. FC Köln</a></li>
<li><a class="team">SC Paderborn</a></li>
<li><a class="team">FC Augsburg</a></li>
<li><a class="team">Hertha BSC Berlin</a></li>
</ul>
</li>
</ul>
</div>
try this in your css file.
.team{
padding-left:20px;
}
or
.team{
margin-left: 20px;
}
simple
solved just adding display block and padding top to .subbar element
* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
display: table-row;
list-style: none;
}
/* Style Menüpunkte Countries */
.countries {
text-decoration: none;
color: #000;
font-size: 14px;
display: block;
border: none;
background: none;
cursor: pointer;
outline: none;
font-family: 'Muli', sans-serif;
}
/* Einzelne List-Container in Submenü */
#sidebar .subbar{
display: block;
padding-top:40px
}
#sidebar .subbar li {
height: 20px;
line-height: 20px;
display: inline-block;
width: 100%;
color:#000 !important
}
a{
color: #000
/* Einzelne Teamnamen in Submenü */
#sidebar .subbar .team {
display:table-cell;
font-size: 11px;
font-family: 'Muli', sans-serif;
padding-left: 33px;
padding-right: 5px;
}
<div id="sidebar">
<header>
Dasocc
</header>
<ul class="nav">
<li class="countries"><img src="{% static "images/germany.png" %}" alt="germany">1. Bundesliga
<ul class="subbar">
<li><a class="team" id="69">FC Bayern München</a></li>
<li><a class="team" id="70">Borussia Dortmund</a></li>
<li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
<li><a class="team" id="74">RB Leipzig</a></li>
<li><a class="team">VfL Wolfsburg</a></li>
<li><a class="team">SC Freiburg</a></li>
<li><a class="team">Eintracht Frankfurt</a></li>
<li><a class="team">Borussia M. Gladbach</a></li>
<li><a class="team">FC Schalke 04</a></li>
<li><a class="team">TSG 1899 Hoffenheim</a></li>
<li><a class="team">1. FC Union Berlin</a></li>
<li><a class="team">Fortuna Düsseldorf</a></li>
<li><a class="team">SV Werder Bremen</a></li>
<li><a class="team">1. FC Köln</a></li>
<li><a class="team">SC Paderborn</a></li>
<li><a class="team">FC Augsburg</a></li>
<li><a class="team">Hertha BSC Berlin</a></li>
</ul>
</li>
</ul>
</div>
I'm making a web page for restaurant. Design says, that I need a little line between page selectors. Have already tried something, but thing worked.
It's HTML5 and CSS3.
* {
margin: 0em;
padding: 0em;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
background: url(https://images.unsplash.com/photo-1526234362653-3b75a0c07438?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80) black no-repeat center center fixed;
background-size: cover;
}
h1 {
color: white;
font-size: 50px;
text-transform: uppercase;
text-align: center;
font-weight: normal;
padding: 5% 0 13%;
}
ul {
list-style-type: none;
padding: 10px 20px;
background: black;
box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.95);
border-radius: 10px;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
}
a:hover {
line-height: 0 !important;
transform: scale(1.5) !important;
transition: all 1s ease !important;
color: wheat;
}
.menu {
font-size: 32px;
width: 75%;
margin: auto;
max-width: 960px;
}
.left {
float: left;
text-align: right;
border-right: solid white;
padding-right: 25px;
}
.right {
float: right;
text-align: left;
border-left: solid white;
padding-left: 25px;
}
a {
list-style-position: inside;
border: 1px solid white;
}
<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
</body>
I hope everything is not so bad :D
Really need this help!
And this is what i would like to have:
https://imgur.com/zxUhiSu/
Added lines (<hr>) between your menu selectors
<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
For the CSS I suggest you don't use !important
A sample jsfiddle
I'm trying to make a dropdown menu that opens when you hover over an item. But i have two problems:
When my mouse leaves the item the div goes away, so i'd like the div to be shown as long as i hover either over the item or the dropdownmenu.
This problem goes hand in hand with the first i believe. It's that the item text should keep a green color as long as you hover over it or the dropdown menu (currently it only does while you hover the item).
Here is the code i've tried so far:
#menu {
float: left;
}
#menu ul.top-menu {
list-style: none;
padding: 0;
}
#menu ul.top-menu li {
display: inline-block;
float: left;
margin: 0 5px;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
#menu ul.top-menu li a {
margin: 0;
padding: 0 5px;
font-weight: 400;
font-size: 18px;
color: black;
display: inline-block;
text-decoration: none !important;
outline: none;
}
#menu ul.top-menu li a:hover {
color: green;
}
#menu ul.top-menu li a:hover + div {
display: block;
}
#menu .sub-container {
display: none;
position: absolute;
top: 32px;
left: -20px;
width: 400px;
background: black;
border-top: 2px solid green;
z-index: 10;
}
#menu .sub-container ul.sub-menu {
padding: 10px;
overflow: hidden;
}
#menu .sub-container ul.sub-menu li {
width: 30%;
float: left;
margin: 0 1.65%;
}
#menu .sub-container ul.sub-menu li:hover {
background-color: green;
color:white;
}
#menu .sub-container ul.sub-menu li a {
color:white;
height: 30px;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 0 10px;
display: block;
border-bottom: none !important;
}
<div class="container">
<div id="menu">
<ul class="top-menu">
<li>
Sub Menu 1
<div class='sub-container'>
<ul class='sub-menu'>
<li><a href='#'>Sub Option 1.1</a></li>
<li><a href='#'>Sub Option 1.2</a></li>
<li><a href='#'>Sub Option 1.3</a></li>
<li><a href='#'>Sub Option 1.4</a></li>
<li><a href='#'>Sub Option 1.5</a></li>
<li><a href='#'>Sub Option 1.6</a></li>
<li><a href='#'>Sub Option 1.7</a></li>
<li><a href='#'>Sub Option 1.8</a></li>
<li><a href='#'>Sub Option 1.9</a></li>
</ul>
</div>
</li>
<li>
Sub Menu 2
<div class='sub-container'>
<ul class='sub-menu'>
<li><a href='#'>Sub Option 2.1</a></li>
<li><a href='#'>Sub Option 2.2</a></li>
<li><a href='#'>Sub Option 2.3</a></li>
<li><a href='#'>Sub Option 2.4</a></li>
<li><a href='#'>Sub Option 2.5</a></li>
<li><a href='#'>Sub Option 2.6</a></li>
<li><a href='#'>Sub Option 2.7</a></li>
<li><a href='#'>Sub Option 2.8</a></li>
<li><a href='#'>Sub Option 2.9</a></li>
</ul>
</div>
</li>
<li>
No Sub Menu 1
</li>
<li>
No Sub Menu 2
</li>
</ul>
</div>
</div>
Every kind of help is appreciated! Thanks in advance.
This will fix the main problem and also this will work with items color stays green while hover the submenu.
#menu {
float: left;
}
#menu ul.top-menu {
list-style: none;
padding: 0;
}
#menu ul.top-menu li {
display: inline-block;
float: left;
margin: 0 5px;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
#menu ul.top-menu > li {
padding-bottom: 10px;
}
#menu ul.top-menu li a {
margin: 0;
padding: 0 5px;
font-weight: 400;
font-size: 18px;
color: black;
display: inline-block;
text-decoration: none !important;
outline: none;
}
#menu ul.top-menu li:hover a {
color: green;
}
#menu ul.top-menu li:hover div {
display: block;
}
#menu .sub-container {
display: none;
position: absolute;
top: 32px;
left: -20px;
width: 400px;
background: black;
border-top: 2px solid green;
z-index: 10;
}
#menu .sub-container ul.sub-menu {
padding: 10px;
overflow: hidden;
}
#menu .sub-container ul.sub-menu li {
width: 30%;
float: left;
margin: 0 1.65%;
}
#menu .sub-container ul.sub-menu li:hover {
background-color: green;
color: white;
}
#menu .sub-container ul.sub-menu li a {
color:white;
height: 30px;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 0 10px;
display: block;
border-bottom: none !important;
}
<div class="container">
<div id="menu">
<ul class="top-menu">
<li>
Sub Menu 1
<div class='sub-container'>
<ul class='sub-menu'>
<li><a href='#'>Sub Option 1.1</a></li>
<li><a href='#'>Sub Option 1.2</a></li>
<li><a href='#'>Sub Option 1.3</a></li>
<li><a href='#'>Sub Option 1.4</a></li>
<li><a href='#'>Sub Option 1.5</a></li>
<li><a href='#'>Sub Option 1.6</a></li>
<li><a href='#'>Sub Option 1.7</a></li>
<li><a href='#'>Sub Option 1.8</a></li>
<li><a href='#'>Sub Option 1.9</a></li>
</ul>
</div>
</li>
<li>
Sub Menu 2
<div class='sub-container'>
<ul class='sub-menu'>
<li><a href='#'>Sub Option 2.1</a></li>
<li><a href='#'>Sub Option 2.2</a></li>
<li><a href='#'>Sub Option 2.3</a></li>
<li><a href='#'>Sub Option 2.4</a></li>
<li><a href='#'>Sub Option 2.5</a></li>
<li><a href='#'>Sub Option 2.6</a></li>
<li><a href='#'>Sub Option 2.7</a></li>
<li><a href='#'>Sub Option 2.8</a></li>
<li><a href='#'>Sub Option 2.9</a></li>
</ul>
</div>
</li>
<li>
No Sub Menu 1
</li>
<li>
No Sub Menu 2
</li>
</ul>
</div>
</div>
#menu {
float: left;
}
#menu ul.top-menu {
list-style: none;
padding: 0;
}
#menu ul.top-menu li {
display: inline-block;
float: left;
margin: 0 5px;
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
#menu ul.top-menu li a {
margin: 0;
padding: 0 5px;
font-weight: 400;
font-size: 18px;
color: black;
display: inline-block;
text-decoration: none !important;
outline: none;
padding-top: 10px;
padding-bottom: 10px;
}
#menu ul.top-menu li a:hover {
color: green;
}
#menu ul.top-menu li:hover div.sub-container {
display: block;
}
#menu .sub-container {
display: none;
position: absolute;
top: 39px;
left: -20px;
width: 400px;
background: black;
border-top: 2px solid green;
z-index: 10;
}
#menu .sub-container ul.sub-menu {
padding: 10px;
overflow: hidden;
}
#menu .sub-container ul.sub-menu li {
width: 30%;
float: left;
margin: 0 1.65%;
}
#menu .sub-container ul.sub-menu li:hover {
background-color: green;
color:white;
}
#menu .sub-container ul.sub-menu li a {
color:white;
height: 30px;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 0 10px;
display: block;
border-bottom: none !important;
}
<div class="container">
<div id="menu">
<ul class="top-menu">
<li>
Sub Menu 1
<div class='sub-container'>
<ul class='sub-menu'>
<li><a href='#'>Sub Option 1.1</a></li>
<li><a href='#'>Sub Option 1.2</a></li>
<li><a href='#'>Sub Option 1.3</a></li>
<li><a href='#'>Sub Option 1.4</a></li>
<li><a href='#'>Sub Option 1.5</a></li>
<li><a href='#'>Sub Option 1.6</a></li>
<li><a href='#'>Sub Option 1.7</a></li>
<li><a href='#'>Sub Option 1.8</a></li>
<li><a href='#'>Sub Option 1.9</a></li>
</ul>
</div>
</li>
<li>
Sub Menu 2
<div class='sub-container'>
<ul class='sub-menu'>
<li><a href='#'>Sub Option 2.1</a></li>
<li><a href='#'>Sub Option 2.2</a></li>
<li><a href='#'>Sub Option 2.3</a></li>
<li><a href='#'>Sub Option 2.4</a></li>
<li><a href='#'>Sub Option 2.5</a></li>
<li><a href='#'>Sub Option 2.6</a></li>
<li><a href='#'>Sub Option 2.7</a></li>
<li><a href='#'>Sub Option 2.8</a></li>
<li><a href='#'>Sub Option 2.9</a></li>
</ul>
</div>
</li>
<li>
No Sub Menu 1
</li>
<li>
No Sub Menu 2
</li>
</ul>
</div>
</div>
I have whitespace between two html sections that I would like to get rid of. Here is a picture of it:
I removed any whitespace in my html code between /div and div, as suggested by answers from my searches, but it didn't seem to fix the problem.
HTML Code:
<!--website main heading layout-->
<div id="heading">
<h1> Beat Your Pace <h1/>
<h2> The music search tool to boost your running performance! </h2>
</div><div id="topbar">
<!--topbar/menu layout-->
<div id="topbar_wrapper">
<ul id="mainmenu">
<li>Home</li><li>
Search</li><li>
Sort By ▼
<ul id="sortmenu">
<li><a href='#'>Song</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Artist</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Album</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>Genre</a>
<ul class="sortsubmenu">
<li><a href='#'>A to Z</a></li><li>
<a href='#'>Z to A</a></li>
</ul>
</li><li>
<a href='#'>BPM</a>
<ul class="sortsubmenu">
<li><a href='#'>Slowest to Fastest</a></li><li>
<a href='#'>Fastest to Slowest</a></li>
</ul>
</li><li>
<a href='#'>Release Date</a>
<ul class="sortsubmenu">
<li><a href='#'>Newest to Oldest</a></li><li>
<a href='#'>Oldest to Newest</a></li>
</ul>
</li>
</ul>
</li><li>
Add Song</li><li>
Contact Us</li>
</ul>
</div>
</div>
body and heading CSS Code:
html, body {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 18px;
}
#heading {
background: url("http://cdn4.techlila.com/wp- content/uploads/2011/01/header2.jpg");
background-position: left;
color: black;
text-shadow: -1px 0 #F8F8FF, 0 1px #F8F8FF, 1px 0 #F8F8FF, 0 -1px #F8F8FF;
}
Menu CSS Code:
#topbar {
background-color: #222;
}
#topbar_wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#mainmenu {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
min-width: 200px;
}
#mainmenu > li {
display: inline-block;
width: 200px;
}
#mainmenu li:hover {
background-color: #333;
}
#mainmenu li a{
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#mainmenu li:hover > ul {
display: block;
}
#sortmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#sortmenu > li {
display: block;
position: relative;
}
#sortmenu li a:hover {
color: #699;
}
#sortmenu li: hover ul {
display: inline-block;
}
.sortsubmenu {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-left: 0px;
text-align: right;
top: 0;
left: 100%;
width: auto;
}
.sortsubmenu li{
display: inline;
white-space: nowrap;
}
.sortsubmenu li a:hover {
color: #DB7093;
}
Remove the default on the <h2> element:
#heading h2 {
margin:0;
}