2

私は水平メニューを持っています、それは純粋なHTML、CSSとJqueryです。すべてのメニューは完璧に機能しますが、メニューのデザインには非常に愚かなセパレータがあり、問題があります。とにかく、ホバーメニューのCSSで他のメニュー項目間のセパレーターをカバーすることさえ可能ですか？

これはメニューです：ここに画像の説明を入力してください

これはホバー中です：ここに画像の説明を入力してください

これが問題です ：ここに画像の説明を入力してください

  • 非常に重要です！メニューは動的です（指定された幅でそれぞれを作成することはできません）
  • 区切り文字h.lineは*.pngファイルです
  • すべてのメニューは純粋なHTML、CSS、およびJquery（問題はCSSのみにあります）であり、メニュー画像の背景はなく、画像は「区切り線」のみです。

CSSコード（私はこの部分だけが問題だと思います）：

    .white ul.mega-menu li {
    float: left; 
    margin: 0; 
    padding: 0;
    text-transform: uppercase;
}
.white ul.mega-menu li a {
    float: left; 
    display: block; 
    color: #47515c; 
    padding: 0px 15px; 
    text-decoration: none;
    border-left: 1px solid #fff;
    background: url(../images/top_menu_separate.png) no-repeat right; 


}
.white ul.mega-menu li a.dc-mega {position: relative;}
.white ul.mega-menu li.mega-hover a, .white ul.mega-menu li a:hover {
    color: #47515c;
    background: #dadcde;
    border-left: 1px solid #dadcde;
    padding-bottom: 0px;
    z-index: 5000000;
    overflow: visible;

}

HTML：

            <div class="white">  
                <ul id="mega-menu-9" class="mega-menu">
                    <li><a href="test.html" class="multi">Expertise</a></li>
                    <li><a href="test.html">About us</a></li>
                    <li><a href="#">Our People</a></li>
                    <li><a href="#">Our work</a></li>
                    <li><a href="#">Candidates</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div>

私はこれが方法だと思います：

.white ul.mega-menu li:hover
{
    border-left: 1px solid #dadcde;
    margin-left: -1px;
}

唯一の問題は、ホバーするとすべてのメニューが右から左に1px移動し、がらくたに見えることです...トリックはありますか？

4

2 に答える 2

1

jsFiddle で問題を再現しました。

jsFiddle: http://jsfiddle.net/gkgUj/

解決：

li:hover + li a {
    border-left: 0 none;
    margin-left: 1px;
}

あなたの場合、これを追加します

.white ul.mega-menu li:hover + li a {
    background-image: none;
}
于 2013-03-14T17:54:18.607 に答える
0

1 つのオプションは、ホバーされた項目を 1 ピクセル左にシフトしてセパレーターをカバーすることです。

.white ul.mega-menu li:hover
{
    border-left: 1px solid #dadcde;
    margin-left: -1px;
}

別のオプションは、各アイテムの左側にセパレーターを配置し、左側のアイテムがホバーされたときに白い境界線に置き換えることです。

.white ul.mega-menu li
{
    background: url(../images/top_menu_separate.png) no-repeat left;
}

.white ul.mega-menu li:hover + li
{
    background: none;
    border-left: 1px solid #fff;
}
于 2013-03-14T17:59:24.247 に答える