HTML/CSS中的下拉菜单不'；t实际上是；下拉列表“；

我正在尝试为一个简单的html页面的导航菜单中的一个选项添加一个下拉菜单。但是，当我将鼠标悬停在导航菜单选项上时，菜单实际上并没有下拉。只要我将鼠标悬停在导航菜单上，它就会用下拉列表中的第一个选项替换导航菜单选项。我不太清楚为什么它没有“掉下来”

任何帮助都将不胜感激。。。下面是导航和尝试下拉列表的HTML

<nav>
    <ul>
        <li><a href="eiffel.shtml">Eiffel Tower</a></li>
        <li><a href="fashion.shtml">Fashion</a></li>
        <li><a href="food.shtml">Food</a></li>
        <li><a href="museums.shtml">Museums</a></li>
        <div class="dropDiv">
            <li class="dropdown"><a href="history.shtml">History</a></li>
                <div class="dropdownContent">
                    <a href=leaders.shtml>Leaders of Paris</a>
                    <a href=future.shtml>Future of Paris</a>
                </div>
        </div>
        <li><a href="language.shtml">Language</a></li>
        <li><a href="works.shtml">Works Cited</a></li>
    </ul>
</nav>

---

我真的不知道为什么下拉部分没有显示，我肯定这是个愚蠢的错误，但我花了一个半小时没有看到它…

问题出在你的HTML中

---

对于第一级项目中的下拉列表，您需要一个与第一级类似的代码块。也就是说，另一个

具有一组

的第二级选项。我看到您提到了位置：dropdownContent类中的绝对。这导致了重叠。把它取下来试试。默认情况下，它设置为static，这意味着元素在文档流中显示时按顺序呈现。其中“绝对”表示元素相对于其第一个定位的祖先元素进行定位。

您有许多不需要的css和标记。把它修好。我已经为你创建了一个基本的。也许你可以试试

.dropdownContent{
显示：无；
背景色：#FFF0F5；
}
.dropdownContent a:悬停{
背景色：#fff8dc；
}
.下载内容a{
显示：块；
}
.dropdown:悬停.dropdownContent{
显示：块；
z指数：1；
}

能否将此代码添加到JSFIDLE？你在使用JQuery和其他框架吗？@Znaneswar不，我不知道它们是什么？这只是一个简单的html页面，我正在为一个类工作，对不起：（我可以试试看。）it@Znaneswar抱歉，把它放在JS提琴上。它看起来像是菜单，但在我的实际年龄，它不会下拉，当我把鼠标悬停在它上面时，它只是用第一个下拉选项替换导航菜单选项…添加了“

”我的两个下拉链接周围都有标签，没有任何更改…您不需要在第二层中添加新的

。

.dropdown {
    float: left;
    background-color: #FFF0F5; 
    width: 100%;
}

.dropDiv {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdownContent {
    display: none;
    position: absolute;
    background-color: #FFF0F5;
    height: 200px;
    width: 100%;
    z-index: 1;
}

.dropdownContent a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdownContent a:hover {background-color: #fff8dc;}

.dropDiv:hover .dropdownContent {
    display: block;
    z-index: 1;
    height: 200px;
}

.dropDiv:hover .dropdown {
    background-color: #fff8dc;
}