css - 前の境界線を隠す最良の方法は？

Question

私はいくつかのdivのメニューを持っています。すべてのdivには1pxの左境界線があります。ホバーすると、現在のdivの背景を変更しますが、次のJSFiddleでわかるように、前の（灰色の）境界線がまだ表示されているのは醜いです。

現在選択されているdivにいるときに非表示にします。何か案は？

フィドル

<div id="main_menu">
    <div class="menu_item"><div class="link">Example</div></div>
    <div class="menu_item"><div class="link">Example</div></div>
    <div class="menu_item"><div class="link">Example</div></div>
    <div class="menu_item"><div class="link">Example</div></div>
</div>

より明確にするために、これから：

これに：

おそらくJSを使用せずに。

Answer 1

.menu_itemホバー CSS を次のように変更します。

#main_menu .menu_item:hover {
    background-color:#00437f;
    cursor:pointer;
    position:relative;
    left:-1px;
}

css の下の位置の更新でテキストを維持するには:

#main_menu .menu_item:hover .link {
    color:#fff;
    border:0px;
    position:relative;
    left:1px;
}