Question

我从包含嵌套列表的菜单中获得了一些丑陋的行为。

父菜单有一些广泛的类别。当用户将鼠标悬停在其中一个列表项上时，下方会显示一个子菜单。这很好。

但是，子项也可以有子菜单（我将这些称为孙子）。这些也会出现在悬停状态，但当用户不再在孙子上盘旋时，整个子菜单都会消失。

最好用FIDDLE

解释

悬停在Parent上会显示3个孩子。这很好。
徘徊在Child 1上会显示孙子女。这也是好。
但是，一旦孩子1下的孙子孙女被扩大，现在尝试点击Child 2或Child 3变得笨拙。这是非常糟糕。

如果没有这种愚蠢行为，如何在这里实现体面的悬停效果？（CSS解决方案更可取。）

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

嵌套列表的标记结构看起来很好。

使用嵌套UL上的绝对位置和你提到的z-index调整应该这样做。

这个仅限CSS的演示看起来很相似：

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

Answer 2

问题是，当你将child1鼠标移出child2时，child1会折叠并从鼠标光标下移出child2。你需要绝对定位孙子女，这样他们才不会被包含在孩子中。

嵌套列表和悬停效果的问题

2 个答案: