Fazy Fazy - 17 days ago 5
CSS Question

Struggling with a specific Nav Menu design

I'm trying to do a nav menu in a particular style, It needs to be a bunch of square buttons/list items, then when you hover over an item, the background behind the item changes color, a decent height above the item and behind the drop down list, as seen in the image below.

My issue is that Im curious if I'm doing it the most efficient way and also when I hover over the initial item, it is working but then you go to one of the drop down items and the main/parent item disappears into the background.

Code:



body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
padding-top: 100px;
padding-left: 100px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
border: solid 4px #fff;
width: 150px;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
}
li a:hover {
color: #fff;
border: solid 4px #00ee98;
border-top: solid 100px #00ee98;
margin-top: -100px;
}
.droplinks {
position: absolute;
background-color: #00aeef;
min-width: 150px;
display: none;
margin-left: -2px;
}
.droplinks a {
padding: 10px;
display: block;
border: solid 2px #00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}

<div class="container-fluid navBG">
<nav>
<ul>
<li><a href="">Home</a>
</li>
<li class="dropbutton"><a href="">Products</a>
<div class="droplinks">
<a href="">Widgets</a>
<a href="">Cogs</a>
<a href="">Gears</a>
</div>
</li>
<li class="dropbutton">
<a href="">Services</a>
<div class="droplinks">
<a href="">Handshakes</a>
<a href="">Winks</a>
<a href="">Smiles</a>
</div>
</li>
<li><a href="">Shop</a>
</li>
<li><a href="">Contact</a>
</li>
</ul>
</nav>
</div>





Then on hovering a menu item, it changes to this;

On Hover

However, when I then go to a sub menu item the top level item messes up as in the example above. Would could be done to resolve this?

Answer

take a look at this fiddle, and here is how you can properly show the sub menu on hovering on menu item:

li:hover .droplinks{ 
  display: block;
}
Comments