下拉鍊接顯示不正確

Question

我有一個帶有下拉菜單的導航欄。

body{margin:0;} 
 
#navbar { 
 
    overflow: hidden; 
 
    background-color: #222d3d; 
 
    margin-left: 25px; 
 
} 
 
#navwrap{ 
 
    background-color: #222d3d; 
 
    width: 100%; 
 
} 
 
#navbar a { 
 
    float: left; 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
#navbar a:hover { 
 
    background-color: #577baf; 
 
} 
 

 
#navbar a.active { 
 
    background-color: #577baf; 
 
} 
 
.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content{ 
 
    margin-top: 48px; 
 
    position: absolute; 
 
    background-color: #222d3d; 
 
    z-index: 1; 
 
    display: none; 
 
} 
 

 
.dropdown-content a { 
 
    color: white 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.dropdown-content a:hover {background-color: #577baf} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #222d3d; 
 
    display: block; 
 
}

<div id="navbar"> 
 
    <a class="active" href="#home">Home</a> 
 
    <div class="dropdown"> 
 
     <a class="dropbtn">Dropdown</a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
       <a href="#">Link 2</a> 
 
       <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    <a href="#about">About</a> 
 
</div>

這應該使工作下拉，而是它讓這樣的：
我想在下拉菜單中的鏈接是相同的寬度爲他們上面的按鈕。可能只是一個基本的風格缺失，但我嘗試了不同的定位，它不起作用。我如何使鏈接正確顯示？提前致謝。

Answer 1

基本問題是，定位.dropdown-content的基礎不是.dropdown而是#navbar。
通過更改並添加left:0; right:0;給孩子，它繼承了寬度 - 只有它是不可見的。從#navbar刪除overflow: hidden，你幾乎不錯。
最後一件事是，下拉菜單中的項目仍然很大。如果要指定元素的外部寬度（包括填充和邊框），則需要設置box-sizing: border-box;。

Fiddle

變更（註釋=刪除）：

#navbar { 
    overflow: visible; 
} 

.dropdown { 
    position: relative; 
} 

.dropdown-content { 
    /* margin-top: 48px; */ 
    top: 48px; 
    left: 0; 
    right: 0; 
} 

.dropdown-content a { 
    box-sizing: border-box; 
} 

順便說一句，如果你改變了規則#navbar a { float: left; }您可以簡化您的規則。如果您將項目更改爲inline-block，它會正常工作。現在它也影響.dropdown-content中的a元素。沒有它，你需要更少的規則來抵消浮動。

Answer 2

亨利，我設法讓navbar的行爲通過使用列表（不知道如果這是可以接受的）。也許有人會有更好的解決方案。它使用列表元素來描述菜單的確具有語義意義，但這是個人偏好。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #222d3d; 
 
} 
 
li { 
 
    float: left; 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: #577baf; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #222d3d; 
 
    min-width: 160px; 
 
    z-index: 1; 
 
} 
 
.dropdown-content a { 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #577baf 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li class="dropdown"> 
 
     <div class="dropbtn">Dropdown</div> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
    </li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>