我正在处理的页面顶部有一个简单的导航菜单。当您将鼠标悬停在导航菜单上时,我希望其中一个链接在其下方弹出一个下拉菜单。
我的下拉菜单显示得很好。唯一的问题是下拉菜单项是整个页面的宽度,而不是导航菜单项的宽度。我不确定是什么原因造成的...
这是导航菜单和下拉菜单的 html 和 css:
.dropdown {
float: left;
background-color: #FFF0F5;
}
.dropDiv {
position: relative;
display: inline-block;
width: 100%;
}
.dropdownContent {
display: none;
background-color: #FFF0F5;
z-index: 1;
width: 300px;
overflow-x: hidden;
}
.dropdownContent a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 300px;
}
.dropdownContent a:hover {
background-color: #fff8dc;
}
.dropDiv:hover .dropdownContent {
display: block;
z-index: 1;
height: 200px;
width: 300px;
overflow-x: hidden;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
<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>
如您所见,这有点乱,因为我一直在添加很多东西,试图想办法解决这个宽度问题。非常感谢任何帮助!
最佳答案
您的代码对我来说效果很好。看起来您的代码中的其他一些 CSS 使其全宽。您是否尝试过用“!important”或“max-width”修复它?
关于html - CSS 下拉菜单占用整个页面宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47504064/