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> 

我想這就是你想要的。