我想知道你是否可以给我一些有关如何纠正这个问题的有用提示?我的网站上有一个主菜单,代码如下:
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
这是一个实际看起来的演示:
问题在于,当我将鼠标悬停在菜单选项(li)上时,会出现背景,但它会溢出到菜单背景的外部,并使它看起来真的很狡猾/垃圾/便宜/糟糕!
请注意(显然)当我更改填充以使其在这些浏览器中正确显示时,它在IE中显得太小了!所以无论如何我都搞砸了。在所有浏览器中,如何使这样的小缺陷看起来一样?
HTML(菜单):
<ul class="menu">
<li class="currentPage" href="index.php"><a>Home</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="support.php">Support</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="myaccount/" class="myaccount">My Account</a></li>
</ul>
CSS:
.menu {
margin-top: 5px;
margin-right: 5px;
width: 345px;
float: right;
}
li {
font-size: 9pt;
color: whitesmoke;
padding-left: 6px;
padding-right: 8px;
display: inline;
list-style: none;
}
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
答案 0 :(得分:1)
您可以通过不根据悬停更改填充来防止出现问题。此外,你应该悬停在
上这是否按预期工作? JSFiddle example
答案 1 :(得分:0)
您的问题可能是由于您使用了display:inline。尝试在ul上设置显式高度。用你的例子做这件事对我有用:
ul {
border-bottom: 2px solid black;
height: 28px;
}
我添加了边框,以便能够看到我对齐的位置。
顺便说一句,正确的解决方案是不使用li:hover,而是a:hover,如前所述。