下拉菜單邊框不會擴展爲全寬

我正在嘗試爲下拉菜單選項卡創建底部邊框。我知道在哪裏添加屬性來添加邊框，但是我遇到的問題是邊框不是從左到右一直延伸。下拉菜單邊框不會擴展爲全寬

HTML：

<div id="navigation"> 
    <ul> 
     <li><a href="#" id="home">Home</a></li> 
     <li><a href="#" id="zeus">Zeus</a> 
     <li><a href="#" id="poseidon">Poseidon</a> 
     <li><a href="#" id="hercules">Hercules</a> 
     <li><a href="#" id="athena">Athena</a> 
     <li><a href="#" id="help">Help</a> 
      <ul> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">FAQ's</a></li> 
      </ul> 
     </li> 
     <li><a href="#" id="account">Account</a> 
      <ul> 
       <li><a href="#">Cart</a></li> 
       <li><a href="#">Orders</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS：

#navigation { 
    background-color: #404040; 
    display: block; 
    text-align: center; 
} 

#navigation ul { 
    display: block; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#navigation ul a { 
    color: white; 
    display: block; 
    font-size: 18px; 
    font-weight: 500; 
    line-height: 32px; 
    padding: 0 30px; 
    text-decoration: none; 
} 

#navigation ul li { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#navigation ul ul { 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background:#fff; 
    padding:0 
} 

#navigation ul ul a { 
    line-height: 120%; 
    padding: 10px 15px; 
} 

#home:hover { 
    color: gray; 
} 

#zeus:hover { 
    color: red; 
} 

#poseidon:hover { 
    color: blue; 
} 

#hercules:hover { 
    color: gold; 
} 

#athena:hover { 
    color: #00ff00; 
} 

#help:hover { 
    color: gray; 
} 

#account:hover { 
    color: gray; 
} 

#navigation ul li ul a:hover { 
    color: gray; 
} 

#navigation ul li:hover > ul { 
    display: block; 
    background-color: #404040; 
    text-align: left; 
    z-index: 99; 
}

來源

2016-02-04 TheDetailer

你必須li設置爲display:inline-block，使得它爲「收縮到合適」，這取決於內容。您可以將width:100添加到子女li，以確保它始終保持父母的全部寬度。

#navigation li li { 
    border-bottom: 1px solid lime; 
    width: 100%; 
}

來源

2016-02-04 21:31:34 Stickers

可以舒展下邊框應用這些規則：

#navigation a + ul li{ /* set width to dropdown menu */ 
    width: 100%; 
} 

#navigation a + ul li{ /* set width and border to dropdown items */ 
    width: 100%; 
    border-bottom: 3px solid blue; 
}

他們將確保您的下拉菜單中得到100％的寬度

，您可以嘗試在this fiddle

來源

2016-02-04 21:34:18 Chris

下拉菜單邊框不會擴展爲全寬

回答

相關問題