Question

我花了将近一整天的时间来查看各种示例，仍然无法找到设置2级子菜单隐藏的方法。我得到了这个网络模板，并试图自定义它。

这是来自css文件的导航位（我知道它看起来很难看）：）

#navigation { height: 35px; line-height: 35px; float: right; position: relative; z-index: 20; }
#navigation ul { list-style: none; list-style-position: outside; font-size: 13px; text-shadow: rgba(255,255,255,0.5) 0px 1px 1px; }
#navigation ul li { float: left; position: relative; padding-right: 2px; background: url(images/navigation-border.png) no-repeat right 0; }
#navigation ul > li.last { background: transparent; width: auto; float: left; padding-right: 0; }
#navigation ul > li.last a { border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px; border-right: 1px solid #d7e1e8 !important; }
#navigation ul > li.first a { border-radius: 5px 0px 0px 5px ; -moz-border-radius: 5px 0px 0px 5px ; -webkit-border-radius: 5px 0px 0px 5px ; -o-border-radius: 5px 0px 0px 5px; border-left: 1px solid #d7e1e8 !important; }
#navigation ul li a { color: #324957; float: left; padding: 0 18px; border: 1px solid #d7e1e8; border-left: 0; border-right: 0; background: url(images/navigation.png) repeat 0 0;  }
#navigation ul li a:hover,
#navigation ul li.active a { background: url(images/navigation-a.png) repeat 0 0; color: #3995d6; text-decoration: none; }

#navigation ul li a span { background: url(images/navigation-arr.png) no-repeat right 0; width: 10px; height: 6px; float: right; padding-left: 3px; margin-top: 14px; }

#navigation ul li ul { display: none; float: none; line-height: 28px;  position: absolute; top: 35px; left: 0; width: 100%; background: #e1efff; border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; }
#navigation ul li:hover ul { visibility: visible; }

#navigation ul li ul li { display: block; float: none; padding: 0; background: transparent; } 
#navigation ul li ul li a { float: none; display: block !important; padding: 0 18px; }
#navigation ul li ul li a:hover { float: none; display: block; background: transparent; background-color: #bdd7f4; }
#navigation ul li.last ul li a {  padding: 0 18px !important;  float: none; display: block;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}
#navigation ul li ul li.last { float: none; display: block; }
#navigation ul li ul li.last a { border-radius: 0px 0px  5px 5px; -moz-border-radius: 0px 0px  5px 5px; -webkit-border-radius: 0px 0px  5px 5px; -o-border-radius: 0px 0px  5px 5px; }

#navigation ul li ul li.first a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}
#navigation ul li.first ul li a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}

以下是我尝试编写子菜单的方法

<nav id="navigation">
                            <ul>
                            <li><a href="#">Individual Patient Analysis</a></li>
                            <li>
                            <a href="#">Multiple Patient Analysis<span></span></a>
                                <ul>
                                    <li><a href="#">Gender</a></li>
                                    <li><a href="#">Age</a></li>

                                    <li><a href="#">Field Number</a></li>
                                    <li><a href="#">Occupation</a></li>
                                    <li><a href="#">Eye<span></span></a>
                                <ul>
                                    <li><a href="#">Left</a></li>
                                    <li><a href="#">Right</a></li>
                                </ul>
                                </li>
                                </ul>
                            </li>


                            <li><a href="#">Upload File</a></li>

                        </ul>
                    </nav>

这里的问题是眼睛的2级子菜单始终可见，甚至没有悬停在“眼睛”选项卡上，我似乎无法修复它。我希望“左”和“右”子菜单仅在“眼睛”选项卡上悬停时才会出现。我在小提琴中发现的另一个问题是菜单隐藏在左或右子菜单上。如何解决？

非常感谢任何帮助！

Answer 1

http://jsfiddle.net/ZhWkP/10/
http://jsfiddle.net/ZhWkP/10/show

您使用display：none来隐藏第二级ul，而不是使用可见性设置为悬停时可见。

 /* apply a natural box layout model to all elements */
 *, *:before, *:after {
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box; 
   box-sizing: border-box;
  }

 #navigation ul ul ul {
      float: none;
      line-height: 28px;
      position: absolute;
      visibility: hidden;
      width: 100%;
      padding: 0 0 0 10px; /* allows to set padding to 100% element. */
 }

 #navigation ul ul li:hover ul {
      visibility: visible;
 }

Answer 2

您最初使用display:none隐藏了下拉菜单，并尝试在visibility:visible项目悬停时使用li，而该项目根本没有显示下拉菜单。

更改此

#navigation ul li:hover ul { 
   visibility: visible; 
}

到下面只显示父ul项的直接子li项。

#navigation li:hover > ul { 
  display:block; 
}

<强> DEMO

Answer 3

检查一下，它可能对您有帮助。

<强> DEMO

<强> CSS

ul, ul li {
    list-style-type:none;
    float:left;
    padding:5px;
}
ul li a {
    text-decoration:none;
}
li ul {
    display:none;
    position:absolute;
}
li ul li {
    float:none;
}
ul li:hover ul {
    display:block;
}
ul li:hover ul ul {
    display:none;
}
ul li ul li:last-child:hover ul {
    display:block;
}

2级子菜单始终可见

3 个答案: