CSS下拉菜单需要整个页面宽度吗？

Question

我正在处理的页面顶部有一个简单的导航菜单。 我希望将鼠标悬停在导航菜单上的链接之一下，然后在其下方弹出一个下拉菜单。

我的下拉菜单似乎很好。 唯一的问题是，下拉菜单项是整个页面的宽度，而不是导航菜单项的宽度。 我不确定是什么原因造成的...

这是导航菜单和下拉菜单的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> 

如您所见，这有点混乱，因为我一直在尝试尝试解决此宽度问题的东西，因此添加了很多东西。 任何帮助是极大的赞赏！

Answer 1

您的代码对我来说很好。 看起来您代码中的其他CSS正在使其全宽。 您是否尝试过使用“！important”或“ max-width”修复它？

Answer 2

您应该在li标签中创建dropDiv并将其设置为绝对位置以获取父窗口

 nav ul { padding:0; margin:0; } nav ul li { list-style: none; float: left; position: relative; margin: 0 5px; } nav ul li a{ color: #000; text-decoration: none; } .dropdown { float: left; background-color: #FFF0F5; } nav ul li:hover .dropDiv { display: block; z-index: 1; height: 200px; width: 300px; overflow-x: hidden; } .dropDiv:hover .dropdown { background-color: #fff8dc; } .dropDiv { position: absolute; width: 100%; display: none; background-color: #FFF0F5; z-index: 1; width: 300px; overflow-x: hidden; } .dropDiv a { display: block; text-align: center; padding: 14px 16px; text-decoration: none; } .dropDiv a:hover { 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> <li class="dropdown"><a href="history.shtml">History</a> <div class="dropDiv"> <a href=leaders.shtml>Leaders of Paris</a> <a href=future.shtml>Future of Paris</a> </div> </li> <li><a href="language.shtml">Language</a></li> <li><a href="works.shtml">Works Cited</a></li> </ul> </nav> 

Answer 3

您好，只要为导航栏定义宽度，就可以定义700px。 并添加一些CSS。 检查此代码

 .dropdown { float: left; background-color: #FFF0F5; } .dropDiv { position: relative; display: inline-block; list-style: none; padding: 9px; float: left; max-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; } .dropdownContent a:hover {background-color: #fff8dc;} .dropDiv:hover .dropdownContent { display: block; z-index: 1; overflow-x: hidden; top: 30px; left: 10px; position: absolute; } .dropDiv:hover .dropdown { background-color: #fff8dc; } nav {width:700px;float: left;} nav > ul > li { float: left; padding: 9px;list-style: none} ul{float:left;} 

 <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> <li><a href="language.shtml">Language</a></li> <li><a href="works.shtml">Works Cited</a></li> </ul> </nav> 

我想这就是你想要的。