我正在尝试为下拉菜单选项卡创建底部边框。我知道在哪里添加属性来添加边框,但我遇到的问题是边框没有一直从左到右延伸。
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;
}
最佳答案
您已将 li
设置为 display:inline-block
,这使其根据内容“缩小以适合”。您可以将 width:100
添加到子级 li
以确保它始终保持父级的全宽。
#navigation li li {
border-bottom: 1px solid lime;
width: 100%;
}
关于html - 下拉菜单边框未扩展到全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35211891/