Html 现有导航栏中的下拉菜单

我想向现有水平导航栏中的特定项目添加下拉菜单。我已经根据我看到的大多数示例对html和css进行了一些裁剪，但是菜单仍然没有显示…我如何才能使子菜单链接显示在一个特定的主菜单链接下面，并且我能够保持主菜单链接的可点击性？ （其上）

HTML

---

首先，您有一些css元素的重复条目

第二，您已将id用于“下拉列表”而不是类

}
.导航{
宽度：101%；
高度：自动；
边框底部：1px实心#eee；
利润率：10px自动5px；
}
.菜单{
宽度：自动；
列表样式：无；
文本对齐：居中；
保证金：0自动；
显示：内联；
}
.菜单a{
浮动：左；
颜色：#999；
文字装饰：无；
文本转换：大写；
显示：内联；
宽度：自动；
线高：36px；
填充：0 37px；
}
菜单a：鼠标悬停，李。菜单a{
颜色：#111；
}
李先生{
位置：相对位置；
浮动：中心；
显示：内联块；
左：205px；
宽度：自动；
}
李：最后一个孩子{
背景：无；
}
.menu>ul{
显示：块；
位置：绝对位置；
顶部：36px；
左：0；
背景:#fbfb；
列表样式：无；
}
李先生{
浮动：无；
边框顶部：1px实心#e3；
右边框：1px实心#e3；
左边框：1px实心#e3；
宽度：自动；
背景：无；
}
李：最后一个孩子{
边框底部：1px实心#e3
}
.menu>ul li a{
浮动：无；
显示：块；
背景：无；
线高：36px；
最小宽度：137px；
宽度：自动；
文本对齐：左对齐；
左侧填充：10px；
颜色：#444；
}
.menu>ul li a:悬停{
背景：#fdfd；
颜色：#777；
}
navbar li ul li a.先生{
左边框：1px实心#1f5065；
右边框：1px实心#1f5065；
边框顶部：1px实心#74a3b7；
边框底部：1px实心#1f5065；
}
#下拉列表{
位置：相对位置；
}
.下降导航{
位置：绝对位置；
排名：0；
左-100%；
填充顶部：30px；
显示：无；
左侧填充：0；
左边距：0；
}
.投李导航{
边框底部：1px
固体rga（255255.2）；
}
#下拉：悬停>。下拉导航{
显示：块；
}

首先，使用创建下拉列表

---

在其上方放置一个标签并使其可点击。

谢谢，我已将其更改为“下拉”类，但我很久以前编辑的css的第一部分，重复条目是否会影响下拉菜单？我太累了，没法在mo整理东西了…复制品似乎不是主要因素。但是id很重要，因为css指向的是类而不是id。这就是为什么它不会从显示变为块显示；我已经更新了答案，以便在#下拉：悬停时可以单击下拉导航。我没有花太多时间修正定位，但至少向你展示了它是如何工作的。你的答案对一个子项很有用，但当我添加更多内容时，主链接不再可点击，子项也不再垂直，你能建议如何修正吗？太棒了！非常感谢您的帮助！：）对于.menu，我建议您为直接子菜单添加右括号“>”。这将更容易为您管理，特别是填充和保证金。读这个

<div class='nav'>
<ul class='menu' id='menu'>
 <li id='dropdown'>
  <a href='#'>Main Item </a>
    <ul class='drop-nav' id='drop-nav'>
   <li><a href='#'>Sub Item</a></li>
  </ul>
 </li>
</ul>
</div>

*{
  margin:0;
  padding:0;
  outline:0;
}
.nav {
  width:101%;
  height:auto;
  border-bottom:1px solid #eee;
  margin:10px auto 5px;
  display:inline-block;
}
.menu {
  width:auto;
  list-style:none;
  font:$pagenavifont;
  text-align:center;
  margin:0 auto;
}
.menu a {
  float:left;
  color:#999;
  text-decoration:none;
  text-transform:uppercase;
  display: inline;
  width:auto;
  line-height:36px;
  padding:0 37px;
}
.menu a:hover,li.menuhover a{
  color:#111;
}
.menu li {
  position:relative;
  float:center;
  display:inline;
  left:205px;
  width:auto;
}
.menu li {
  position:relative;
  float:center;
  display:inline;
  left:205px;
  width:auto;
}
.menu li:last-child {
  background:none;
}
.menu ul{
  display:none;
  position:absolute;
  top:36px;
  left:0;
  background:#fbfbfb;
  display:none;
  list-style:none;
}
.menu ul li{
  float:none;
  border-top:1px solid #e3e3e3;
  border-right:1px solid #e3e3e3;
  border-left:1px solid #e3e3e3;
  width:auto;
  background:none;
}
.menu ul li:last-child {
    border-bottom:1px solid #e3e3e3
}
.menu ul li a{
  float:none;
  display:block;
  background:none;
  line-height:36px;
  min-width:137px;
  width:auto;
  text-align:left;
  padding-left:10px;
  color:#444;
}
.menu ul li a:hover{
    background:#fdfdfd;
    color:#777;
}
.navbar li ul li a  {
    border-left: 1px solid #1f5065; 
    border-right: 1px solid #1f5065; 
    border-top: 1px solid #74a3b7; 
    border-bottom: 1px solid #1f5065; 
}
.dropdown {
  position:relative;
}
.drop-nav {
  position:absolute;
  display:none;
}
.drop-nav li {
  border-bottom: 1px solid rga(255,255,255,.2);
}
.dropdown:hover > .drop-nav{
  display:block;
}