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、 、heightおよび水平方向の境界線を から削除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 に答える