1

我创建了一个垂直菜单，并希望它在悬停和选定项目上有一个右红色边框。

但是，由于我的 li 边框底部似乎弄乱了悬停状态，所以在悬停时我似乎无法正确处理。底部边框与右侧边框略微重叠。

这是小提琴中的代码。

http://jsfiddle.net/4KBE4/1/

HTML：

<div class="messaging">

    <div class="sideMenu"> 
        <ul class="messagesMenu">
            <li class="selected"><a href="#">Inbox<span>14</span></a></li> 
            <li><a href="#">Outbox</a></li> 
            <li><a href="#">Address Book</a></li> 
            <li><a href="#">Trash</a></li> 
        </ul>
    </div> 

    <div class="messagesWrapper">
    </div>

</div>

CSS：

.messaging {
    width: 500px;
    margin-bottom: 20px;
}
.sideMenu {
    display: inline-block;
    width: 200px;
    float: left;    
}
.messagesWrapper {
    background: honeydew;
    width: 300px;
    height: 200px;
    float: right;    
    min-height: 500px;
}
.messagesMenu {
    background: #FFF;
    padding-bottom: 20px;
}
.messagesMenu li {
    padding: 5px;
    border-top: 1px solid #d4d4d4;
    height: 3em;
    display: block;
    position: relative;
    border-right: 5px solid #d4d4d4;
}
.messagesMenu li:first-child { border-top: none; }
.messagesMenu li:last-child { border-bottom: 1px solid #d4d4d4; }
.messagesMenu li a {
    line-height: 3em;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    padding-left: 5px;
    color: #c4c4c4;
    cursor: pointer;
}
.messagesMenu li a span {
    color: #FFF;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    background: #999;
    border-radius: 5px;
    margin-left: 100px;
    padding: 2px 6px;
}
.messagesMenu li:hover { border-right-color: #ed1c24; }
.messagesMenu li.selected { 
    border-right-color: #ed1c24;
    border-bottom: none;
}
.messagesMenu li.selected a { color: #2f3239; }
.clearfix { zoom: 1; }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}​

希望有人能帮忙！谢谢 ：）

4

1 回答 1

2

给出链接display: block，删除它们的宽度：100%，从 中删除padding、 theheight和水平边框，li并将它们添加到链接上。

演示

.messagesMenu li { border-right: 5px solid #d4d4d4; }
.messagesMenu li:first-child a { border-top: none; }
.messagesMenu li:last-child a { border-bottom: 1px solid #d4d4d4; }
.messagesMenu li a {
    display: block;
    line-height: 3em;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #c4c4c4;
    cursor: pointer;
    height: 3em;
    padding: 5px 5px 5px 10px;
    border-top: 1px solid #d4d4d4;
}
于 2012-09-18T19:49:09.450 回答