[英]background-color does not fill entire cell in menu
The background color in my navigation bar isn't filling the entire cell. 我的导航栏中的背景颜色无法填充整个单元格。 Their is a line at the bottom of the menu that remains the color of the background of the page itself. 它们是菜单底部的一行,保留页面本身背景的颜色。 How do i fill entire cell with background color correctly? 如何正确用背景色填充整个单元格?
Here is a JSFiddle i made to test it out. 这是我测试的JSFiddle 。 I'm new to JSFiddle so im not sure how long the link stays active. 我是JSFiddle的新手,所以我不确定该链接保持活动状态多长时间。
CSS CSS
.hovermenu ul {
font: bold 20px Tahoma;
padding-left: 0;
padding: 0;
margin-left: 0;
height: 20px;
display:inline-block;
background-color:red;
}
.hovermenu ul li {
display: block;
position: relative;
float: left;
margin: 0;
}
.hovermenu li ul { display: none; }
.hovermenu ul li a {
display: block;
text-decoration: none;
color: black;
border: 2px solid #000000;
padding: 2px 0.5em;
}
.hovermenu ul li a:hover
{
background-color:#fdff30;
border-style: outset;
}
.hovermenu li:hover ul {
display: block;
position: absolute;
}
.hovermenu li:hover li {
float: none;
font-size: 20px;
}
.hovermenu li:hover a { background: #EEEEEE; }
.hovermenu li:hover li a:hover { background: #fdff30; }
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
HTML HTML
<div class="hovermenu">
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="/inventory.html">Inventory</a>
<ul>
<li><a href="/Trucks/main.html">Trucks</a></li>
<li><a href="location.html">Equipment</a></li>
<li><a href="location.html">Trailers</a></li>
</ul>
</li>
<li><a href="location.html">Location</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
这是因为您将LI高度限制为20像素,只需从CSS中删除该行即可正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.