0

サブカテゴリをドロップダウンし、それらを下に水平に実行する CSS ベースのナビゲーション要素があります。このような：

ナビゲーションのスクリーンショット

ユーザーがメイン アイテムの上にマウスを置くと、銀色の背景が表示され、ユーザーがサブナビゲーション アイテムの上にマウスを置くと、オレンジ色に変わります。アクティブなページでもそのように表示されます。

リストは典型的な方法で構成されています。

<div id="cv-nav">
    <ul>
        <a href="#"><li>Item 1</li></a>
        <a href="#"><li>Item2
            <ul>
                <li><a href="#">Item 2a</a></li>
                <li><a href="#">Item 2b</a></li>
            </ul>
        </li></a>
        <a href="#"><li>Item 3</li></a>
        <ahref="#"><li>Item 4
            <ul>
                <li><a href="#">Item 4a</a></li>
                <li><a href="#">Item 4b</a></li>
            </ul>
        </li></a>
        <a href="#"><li>Item 5</li></a>
    </ul>
</div>

そして、CSS によってすべてが適切に機能します。

#cv-nav {
    background-image: url("nav-background");
    background-position: left top;
    background-repeat: no-repeat;
    height: 50px;
    position: absolute;
    top: 165px;
    width: 1024px;
}
#cv-nav ul {
    height: 50px;
    position: relative;
    width: 1024px;
}
#cv-nav ul li {
    float: left;
    height: 50px;
    margin: 0 1px;
    padding: 0;
    text-align: center;
}
#cv-nav ul a li, #cv-nav ul li a {
    color: #D0D2D2;
    text-transform: uppercase;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 50px;
}
#cv-nav ul li:hover ul li a {
    color: #D0D2D2;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 30px;
}
#cv-nav ul li:hover, #cv-nav ul a li:hover, #cv-nav ul li.active {
    background-image: url("silver-button");
    background-position: left top;
    background-repeat: repeat-x;
}
#cv-nav ul li ul li:hover {
    background: none;
}

#cv-nav ul li:hover a, #cv-nav ul a li:hover, #cv-nav ul li:hover p, #cv-nav ul li.active a, #cv-nav ul a li.active, #cv-nav ul li.active p {
    color: #4f4f51;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    text-transform: uppercase;

}

#cv-nav ul li ul li a:hover, #cv-nav ul li ul.active li a:hover, #cv-nav ul li ul.active li.active, #cv-nav ul li ul.active li.active a  {
    color: #FAB631;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    text-transform: uppercase;
    background:none;
}

#cv-nav ul li ul {
    display: none;
    clear: both;
}

#cv-nav ul li:hover ul, #cv-nav ul li.hover ul, #cv-nav ul li ul.active {
    display: inline;
    height: 30px;
    left: 0;
    margin: 0;
    padding: 0 0 0 40px;
    position: absolute;
    top: 50px;
    width: 984px;
    background-image: url("subnav-background");
    background-position: left top;
    background-repeat: repeat-x;
}
#cv-nav ul li ul li{
    position:relative;
    float:left;
}

#cv-nav ul li ul li, #cv-nav ul li ul li a, #cv-nav ul li ul.active li, #cv-nav ul li ul.active li a {
    color: #D0D2D2;
    float: left;
    font-family: "Helvetica Neue Black Italic",Helvetica,sans-serif;
    font-size: 12px;
    height: 30px;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0px 10px 0 0;
    text-transform: uppercase;
    line-height: 30px;
}​

ただし、IE では、ブラウザはネストされた<ul>s を単なる別の として扱い、<li>前のアイテムの隣にフロートします。

IE のナビゲーション

subnav 要素の配置とスタイリングは (ある程度) 正しいことがわかりますが、ネスト<ul>は独自のボタンであってはなりません。要素にclear:both;プロパティを追加しようとしましたが、役に立ちませんでした。#cv-nav ul li ul

これは、私が見落としていた単純なものでなければなりません。任意の支援をいただければ幸いです。

ここにフィドルがあります：http://jsfiddle.net/tylonius/AD7VL/

タイ

4

1 に答える 1

0

問題を発見しました：

クライアントは<li>、ラベルだけでなく、要素全体をクリックできるようにしたいと考えていました。ネストされたリストを持たない要素の場合は、正常に機能しました。ただし、それらすべてを 1 つの<a>要素内に配置すると、IE が混乱します。

<a>ラベルを囲むように移動すると、問題が解決しました。

于 2012-10-10T17:30:49.600 に答える