Question

I’m getting some ugly behavior from a menu that contains nested lists.

The parent menu has some broad categories. When the user hovers over one of these list items, a child menu appears below. This is fine.

However, the child items can also have sub menus (I’ll refer to these as grandchildren). These also appear on hover, but the entire child menu disappears when the user no longer hovers on the grandchild.

This is best explained with a FIDDLE

• Hovering on Parent displays the 3 children. This is good.
• Hovering on Child 1 displays the grandchildren. This is also
  good.
• But now trying to click Child 2 or Child 3 once the grandchildren under child 1 are expanded becomes clumsy. This is
  very bad.

How can a decent hover effect be achieved here without this goofy behavior? (A CSS solution would be preferable.)

HTML

<div id="centeredmenu">
    <ul>
      <li>
        <p><a href="#"><span>Parent</span></a></p>
            <ul>
               <li>
                   <a href="#">Child 1 </a>
                      <ul>
                        <li><a href="#">grandchild 1</a></li>
                        <li><a href="#">grandchild 2</a></li>
                        <li><a href="#">grandchild 3</a></li>
                      </ul>  
                </li>
                <li><a href="#">Child 2</a></li>
                <li><a href="#">Child 3</a></li>
              </ul>
          </li>
   </ul>

​

CSS

#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
    display:block;
    margin:0 0 0 0px;
    padding:3px 10px;
    background: rgb(240,240,240);
    color:#333333;
    text-decoration:none;
    line-height:2.3em;
    border-top: 4px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 1px solid #848484;
}

/*hides the sub menu*/
#centeredmenu ul li ul li{
    display: none;
}

/*displays sub menu on hover*/
#centeredmenu ul li:hover ul li {
    display: block;
    clear: both;
    margin-left: 15px;
}

/*hides sub-sub menu*/
#centeredmenu ul li ul li ul{
    display: none;
}

/*displays sub-sub menu on hover*/
#centeredmenu ul li ul li:hover ul {
    display: block;
    clear: both;
    margin-left: 15px;
}​

Answer 1

The markup structure of nested lists looks fine.

Using absolute positions on the nested ULs and the z-index tweaks you mentioned should do it.

This CSS only demo looks relevant:

http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html