Html CSS下拉菜单不工作

我不知道这为什么不起作用？我试图制作一个下拉菜单，当我在上面悬停时，它不会出现

CSS

HTML

使用CSS选择器，您不能在DOM树上向后移动。您拥有的是一个选择器，它作为

#nav-line2

的子项作为

#about

的子项查找

#dropmenu

。此选择器应能满足您的需要：

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

这是固定的

ul#nav-line2 li{
位置：相对位置；
列表样式类型：无；
浮动：左；
填充：0px；
宽度：125px；
高度：25px；
}
ul#下拉列表{
位置：绝对位置；
左：0；
宽度：125px；
可见性：隐藏；
}
ul#nav-line2 li:悬停下拉菜单{
能见度：可见；
}

---

稍微更改了您的结构以包含更多UL、LI元素，希望这有助于

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

ul.菜单{高度：40px；}
ul.menu li{浮动：左；宽度：自动；列表样式：无；边框：1px实心#ccc；位置：相对；}
菜单li{显示：块；填充：10px；}
ul.菜单li.子菜单{
背景：#ccc；
位置：绝对位置；
左：0px；
顶部：40px；
z指数：999；
列表样式：无；
填充：0；
宽度：120px；
显示：无；
}
ul.menu li ul li{显示：块；宽度：100%；}
ul.menu li ul li:hover{背景：红色；}
ul.menu li:悬停ul.子菜单{display:block；}

首先，您的标记无效。你错过了一个结束语

div

tag你是个大救命恩人。谢谢，请告诉我如何制作一个填充区域，以便在悬停时下拉菜单保持打开状态。@SoftDev您可能应该自己解决这个问题；但是，为了让您大致了解需要执行的操作，您应该将边距更改为填充（边距不会触发悬停事件），添加到选择器中以包括

#dropmenu

本身的悬停伪类（例如

#about:hover+#dropmenu，#dropmenu:hover

），并删除第一个选择器的

#nav-line2

部分（它增加了太多的特殊性，使得

#dropmenu:hover

选择器无效）。例子：

<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>

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

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

<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>