michel lompret michel lompret - 6 months ago 16
HTML Question

hover submenu to left css

trying to have a submenu on left side when i hover the li but the problem is that it also display space under the li. In this demo when awesome link 3 is hover there's some space under the li click here

<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<div class="menu-mega-container">
<ul id="menu-mega" class="nav-menu">
<li><a href="#">My awesome button</a></li>
<li class="has_children"><a href="#">My awesome button</a>
<ul>
<li><a href="#">awesome link nº 1</a></li>
<li><a href="#">awesome link nº 2</a></li>
<li class="has_children"><a href="#">awesome link nº 3</a>
<ul>
<li><a href="#">awesome link nº 1</a></li>
<li><a href="#">awesome link nº 2</a></li>
<li><a href="#">awesome link nº 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>


and the css

nav{position: relative;}
nav ul {
list-style: none;
margin:0;
padding: 0;
}

nav >div> ul > li {
float: left;
}
nav >div> ul > li > a:hover{
background-color: red;
}
nav >div> ul > li > ul {
position: absolute;
background-color: green;
display: none;
z-index: 500;

}
nav >div> ul > li:hover > ul {

display:block;

}
nav li > ul ul {
display: none;
}

nav li > ul li:hover > ul {
display: block;
position: relative;
left: 100%;
top: -20px;
background-color: green;

}

Answer

The reason why you see spacer here is that you make "nav li > ul li:hover > ul" positioned by 'relative', so that the parent of it would be expanded by its height too.

I recommend you using "absolute" instead of "relative".

nav li > ul li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: 20px;
  background-color: green;
  width: 100%;
}

then make its parent positioned by "relative".

.has_children {
  position: relative;
}

For the effect, please try this.

Comments