CODEWITHSUNDEEP
htmlcss
Forty-Two
Forty-Two

Reputation: 7605

problems with nested lists and hover effects

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

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;
}​

Upvotes: 1

Views: 2015

Answers (2)

hansvedo
hansvedo

Reputation: 446

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

Upvotes: 2

Rob
Rob

Reputation: 12872

The problem is that when you mouse out of child1 onto child2, child1 collapses and moves child2 out from under the mouse cursor. You need to absolutely position the grandchildren so they aren't contained within the children.

Upvotes: 0

Related Questions