dave may dave may - 6 months ago 7
HTML Question

why is that when hovering over my horizontal menus the submenus disappear

I have a horizontal style menu when hovering over it, and trying to hover over its list items and submenus, the menu disappears.



#main_nav:before,
#main_nav:after {
content: "";
display: table;
}
#main_nav {
zoom: 1;
list-style: none;
float: left;
margin: 0px 0px 0px 350px;
}
#main_nav li {
float: left;
position: relative;
padding: 0px 5px 0px 5px;
cursor: pointer;
}
#main_nav li a {
text-align: center;
}
#main_nav ul {
list-style: none;
width: 110px;
margin: 0px;
padding: 0px;
border: solid;
visibility: hidden;
position: absolute;
top: 50px;
left: 0px;
z-index: 1;
}
#main_nav li:hover > ul {
visibility: visible;
opacity: 1;
top: -3px;
}
#main_nav > li:hover {
border-bottom: solid red;
}
#main_nav >li:hover > ul {
top: 30px;
}
#main_nav ul ul {
left: 110px;
}

<ul id="main_nav">
<li>TITLE 1
<ul>
<li> <a href=#>SUBMENU 1</a>
<ul class="submenu">
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 2</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 3</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>TITLE 2
<ul>
<li> <a href=#>SUBMENU 1</a>
<ul class="submenu">
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 2</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 3</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>TITLE 3
<ul>
<li> <a href=#>SUBMENU 1</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 2</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 3</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>TITLE 4
<ul>
<li> <a href=#>SUBMENU 1</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 2</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 3</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>TITLE 5
<ul>
<li> <a href=#>SUBMENU 1</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 2</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 3</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>TITLE 6
<ul>
<li> <a href=#>SUBMENU 1</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 2</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 3</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>TITLE 7
<ul>
<li> <a href=#>SUBMENU 1</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 2</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
<li> <a href=#>SUBMENU 3</a>
<ul>
<li><a href=#>SUBMENU 1</a>
</li>
<li><a href=#>SUBMENU 2</a>
</li>
<li><a href=#>SUBMENU 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>





So when hovering over the menus, and then the submenus pop up and when i try to hover over the submenu, they disappear, why is that?

Answer

The problem is the ul is too far from the li, so when you try to reach the the hover state is disabled.

Try the following CSS:

#main_nav:before,
#main_nav:after {
  content: "";
  display: table;
}
#main_nav {
  zoom: 1;
  list-style: none;
  float: left;
  margin: 0px 0px 0px 350px;
}
#main_nav li {
  float: left;
  position: relative;
  padding: 0px 5px 0px 5px;
  cursor: pointer;
}
#main_nav li a {
  text-align: center;
}
#main_nav ul {
  list-style: none;
  width: 110px;
  margin: 0px;
  padding: 0px;
  border: solid;
  visibility: hidden;
  position: absolute;
  top: 50px;
  left: 0px;
  z-index: 1;
}
#main_nav li:hover > ul {
  visibility: visible;
  opacity: 1;
  top: -3px;
}
#main_nav > li:hover {
  border-bottom: solid red;
}
#main_nav >li:hover > ul {
  top: 30px;
}
#main_nav ul ul {
  left: 110px;
}

/* To make the first li higher */
#main_nav > li:after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 20px;
}
/* To make the li's inside ul wider */
#main_nav ul > li:after {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  display: block;
  width: 50px;
  height: 20px;
}
Comments