background-color不會填充菜單中的整個單元格

[英]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. I'm new to JSFiddle so im not sure how long the link stays active.

這是我用來測試它的JSFiddle。我是JSFiddle的新手,所以我不確定鏈接保持活動多長時間。

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

<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>

1 个解决方案

#1


1  

It is due to you are limiting the LI height with 20px, just remove that line from your css and it will work fine.

這是因為你用20px來限制LI高度,只需從你的css中刪除該行,它就能正常工作。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/07/06/7299408adcf86e739d1ee4e68d0de0c7.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com