1

メニュー項目間にセパレーターがある CSS ナビゲーションがあります。サブメニュー (「ライフスタイル」など) を含む 1 つの項目にカーソルを合わせると、これらのセパレーターはリンクの背景領域の「内」ではなく、左右に広がっているため、見苦しく見えます。ホバーとアクティブなクラスでのみ、これらのセパレーターを削除する方法はありますか?

ここに私のcssコードがあります:

    #mainnav {
    width: auto;
    height: 100px;
    padding-top: 26px;
    float: right;
    right:0;
    z-index:100;
}
#mainnav ul,
#mainnav li,
#mainnav span,
#mainnav a {
  position: relative;
  margin: 0;
  padding: 0;
}
#mainnav ul{
    list-style-type:none;
}
#mainnav ul li:hover {
    background-color: #AEB67F;
}
#mainnav ul li a {
    padding: 50px 12px 57px 12px;
    text-align: center;
}
#mainnav ul li a:hover, #mainnav ul li a.active  {
    background-color: #AEB67F;
    padding: 50px 12px 57px 12px;
}
#mainnav > ul > li {
  float: right;
}
#mainnav ul:after {
    content: ""; clear: both; display: block;
}
#mainnav ul li {
    border-left:solid 1px #B4BC84;
}
#mainnav ul li:last-child {
    border:none;
}
#mainnav ul ul li + li:after {
    content: "";
    clear:both;
}
#mainnav ul ul {
    display: none;
}
#mainnav ul li:hover > ul {
    display: block;
}
#mainnav ul ul {
    background: rgb(174,182,127); 
    opacity: 0.9;
    border-radius: 0px; 
    position: absolute; 
    top: 74px;
    width:170px;
}
#mainnav ul ul li {
    float: none; 
    border-top: none;
    position: relative;
    padding: 8px 12px 8px 0;
    border-bottom: 1px dotted #94A062;
    border-top: none;
}
#mainnav ul ul li a {
    color: #fff;
    text-decoration:none;
    text-align:left;
    padding: 8px 30px 8px 12px;
}
#mainnav ul ul li:last-child a {
    border-bottom: none;
}
#mainnav ul ul li a:hover {
    background: rgb(48,50,40);
     -webkit-transition: all .2s ease-in-out;  
     -moz-transition: all .2s ease-in-out; 
     -ms-transition: all .2s ease-in-out;  
     -o-transition: all .2s ease-in-out;  
     transition: all .2s ease-in-out;
     padding: 8px 30px 8px 18px;
}
#mainnav ul ul li:hover {
    background: rgb(48,50,40);
    padding: 8px 0;
    border: none;
}

ここに私が取り組んでいるサイトへのリンクがあります: http://prestigetrips.com/lapointe/index.php?id=1

あなたが助けてくれることを願っています！前もって感謝します！

4

4 に答える 4

0

border-left:solid 1px #B4BC84;から行を削除するだけ#mainnav ul li {です。

これがお役に立てば幸いです！

于 2013-07-05T02:53:54.190 に答える
0

次のような短いスクリプトを作成できます

$('.menu1').mouseenter(function{
    $(this).css('border-left', '0');
}).mouseleave(function{
    $(this).css('border-left', 'add your values here');
});

これは 1 つの解決策です。

于 2013-07-05T03:15:06.950 に答える
0

私は遊んで、これを思いついた：

#mainnav ul liから に変更border-leftしborder-right、

#mainnav ul li:last-child {
   border: medium none;
}

に：

#mainnav ul li:first-child {
   border: medium none;
}

次のスタイルを追加します。

#mainnav ul li:hover,
#mainnav ul li:hover + li {
   border: none;
}

これはAdjacent sibling selectorと呼ばれます。
IE8以降で動作するはずです。

于 2013-07-05T06:57:01.993 に答える