0

HTML

<div>
<ul class="menubar">
 <li>home</li>
 <li>product</li>
 <li>about us</li>
 <li>contact us</li>
</div>

CSS

.menubar li
{
    float: left;
    position: relative; 
    display: block;
    text-decoration: underline;
    text-transform:capitalize
    background:url(../image/rightborder.png) no-repeat right center;
}

.menubar li:hover
{   

    background: #FF0000 ; 
    color: #FFFFFF;
}

这项工作运行良好，但问题background:url(../image/rightborder.png)出在最后一个菜单“联系我们”之后。反正有没有关掉它。

4

3 回答 3

2

只需将其添加到 CSS 中，它可能会有所帮助

.menubar li:last-child { background:none}

但是在IE8以下不能正常工作

于 2012-05-09T05:21:24.620 回答
2

class为最后一项添加一个属性，比如说<li class=last>contact us</li>，然后添加规则.menubar li.last { background-image: none; }。

这适用于所有支持 CSS 的浏览器。虽然有点笨拙，但使用类选择器是最安全的，而且当它是单个列表时，笨拙因素是相当不相关的。

于 2012-05-09T05:26:36.280 回答
0

你也可以这样写：

.menubar li + li
{
    background:url(../image/rightborder.png) no-repeat left center;
}

首先关闭你的UL

于 2012-05-09T05:22:48.300 回答