1

私は自分のウェブサイトのナビゲーション メニューを作成しようとしています。 -and-jquery/ ガイドとして。正常に機能しましたが、nav タグに ( id="coolMenu" ) を追加しようとするとすぐに機能しなくなります。

ulタグから外してnavタグに追加したら動かなくなりました。何も表示されません。何が間違っているのですか？

ありがとう。

以下のhtmlコード：

<nav id="coolMenu">
<ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Mauricii</a></li>
    <li> 
        <a href="#">Periher</a>
            <ul class="noJS">
                <li><a href="#">Hellenico</a></li>
                <li><a href="#">Genere</a></li>
                <li><a href="#">Indulgentia</a></li>
            </ul>
    </li>
    <li><a href="#">Tyrio</a></li>
    <li><a href="#">Quicumque</a></li>
</ul>
</nav>

以下のCSS：

/* Structure
------------------------------------------*/
#coolMenu,
#coolMenu ul {
    list-style: none;
}
#coolMenu {
    float: left;
}
#coolMenu > li {
    float: left;
}
#coolMenu li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#coolMenu ul li a {
    width: 80px;
}
#coolMenu li:hover ul.noJS {
    display: block; 
}


/* Main menu
------------------------------------------*/
#coolMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
}
#coolMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#coolMenu > li:hover > a {
    background: #f09d28;
    color: #000;
}


/* Submenu
------------------------------------------*/
#coolMenu ul {
    background: #f09d28;
}
#coolMenu ul li a {
    color: #000;
}
#coolMenu ul li:hover a {
    background: #ffc97c;
}
4

2 に答える 2

1

あなたの問題はここにあります：

<nav id="coolMenu">
<ul>

ID タグは順不同リストに付けられるはずです。

<nav>
<ul id="coolMenu">

編集してコードを見てください：http://jsfiddle.net/UMTGR/1/

于 2012-11-17T10:56:54.803 に答える
1

問題はここにあります：

#coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
}

要素にid を設定したため、サブメニューではなくnav、メインulが に設定されます。id を on にしたい場合は、それを反映するようにすべての css セレクターを変更する必要があります。display: noneulnav

または、要素をターゲットにしたい場合は、nav単に新しい ID を与えて残りをそのままにしませんか?

于 2012-11-17T13:51:58.917 に答える