Question

我不知道为什么这不起作用？我正在尝试制作一个下拉菜单，当我在它上面盘旋时它没有显示出来。

CSS

#nav-line2 #dropmenu
{position:absolute;
display:none;
z-index:999;
list-style:none;
margin-left:450px}

#about:hover #nav-line2 #dropmenu{display:block;}

HTML

<div id="nav-line2" style="float:left">
<a class="navlink" id="about" href="/about">about</a>
<div id="dropmenu">
<li><a class="navlink" href="/aboutacc">Board of Directors</a></li>
<li><a class="navlink" href="/governance">Structure &amp; Governance</a></li>
</div>
<a class="navlink" href="/faq">FAQ</a>
</div>

Answer 1

您无法使用CSS选择器向后移动DOM树。你拥有的是一个选择器，它正在寻找#dropmenu作为#nav-line2的孩子作为#about的孩子。这个选择器可以满足您的需求：

#about:hover + #dropmenu {
    display:block;
}

它是adjacent sibling selector。

Answer 2

固定，

jsFiddle

<ul id="nav-line2">
<li><a class="navlink" id="about" href="/about">about</a>
    <ul id="dropdown">
       <li><a class="navlink" href="/aboutacc">Board of Directors</a></li>
      <li><a class="navlink" href="/governance">Structure &amp; Governance</a></li>        
    </ul>
 </li>
 <li><a class="navlink" href="/faq">FAQ</a>
 </li>
 </ul>


ul#nav-line2 li {
position:relative;
list-style-type:none;
float: left;
padding:0px;
width: 125px;
height: 25px;
}
ul#dropdown {
position:absolute;
left:0;
width:125px;
visibility: hidden;
}
ul#nav-line2 li:hover #dropdown {
visibility:visible;
}

稍微改变了你的结构以包含更多的UL，LI元素，希望这有帮助

Answer 3

此HTML标记是下拉菜单的标准格式使用始终相同的结构来编码导航检查以下jsfiddle示例：

JSFIDDLE

<style>
ul.menu{height:40px;}
ul.menu li{float:left; width:auto;list-style:none;border:1px solid #ccc; position:relative;}
ul.menu li a{display:block; padding:10px;}

ul.menu li ul.subMenu{
background:#ccc;
position:absolute;
left:0px;
top:40px;
z-index:999;
list-style:none;
padding:0;
width:120px;
display:none;
}
ul.menu li ul li{ display:block; width:100%;}
ul.menu li ul li:hover{background:red;}
ul.menu li:hover ul.subMenu{display:block;}
</style>

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
    <ul class="subMenu">
    <li><a href="#">Service 1</a></li>
    <li><a href="#">Service 2</a></li>
    <li><a href="#">Service 3</a></li>

</ul>
    </li>

</ul>

CSS下拉菜单无效

3 个答案: