CSS定位中的下拉菜單項
[英]dropdown menu item in css positioning
問題描述
我想在CSS中創建一個下拉菜單...我已經有一個菜單處於“固定”位置（此第一菜單必須固定，別無其他），但是當我嘗試設計下拉菜單時，其中的項目卻沒有轉到我想要的位置，並始終與第一個菜單對齊。請告訴我正確的操作方法。
#menu { overflow: hidden; position: fixed; top: 0; width: 50%; margin-left: 25%; background-color: #333; color: #f2f2f2; } .menu-content { float: left; display: block; text-decoration: none; padding: 25px 20px; font-size: 17px; } #products { padding-top: 25px; font-size: 22px; } .dropdown { float: left; overflow: hidden; } .dropdown .dropdown-btn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: center ; } .dropdown:hover .dropdown-content { display: block; }
<body> <div id="menu"> <div class="dropdown"> <button id="products" class="dropdown-btn menu-content"> <i class="fa fa-bars"></i> products </button> <div class="dropdown-content"> <a> speaker </a> </div> </div> </div </body>
這是我得到的結果： 在此處輸入圖片描述
3 個解決方案
解決方案1
0 2017-10-24 12:28:38
只需刪除
#menu {
overflow: hidden; <--remove!!
}
並添加
.dropdown:hover .dropdown-content {
display: block;
margin-top: 65px; <- Add
}
解決方案2
0 2017-10-24 12:43:39
如果您在#menu菜單上使用了overflow：hidden，則下拉列表將永遠不會顯示，因為列表是嵌套在其中的，因此將受到外部div的限制。此外，請使用margin-top在每個項目之間添加一定的距離。
解決方案3
0 2017-11-13 16:15:03
一種解決方法是將位置從絕對更改為相對。 還增加了一種定位方式
.dropdown-content {
display: none;
position: absolute;<-- change to relative-->
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
在CSS中定位下拉菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.