0

HTML:

<!-- MENU -->
        <nav id="menu">
            <li><a href="#">Categories 1</a>
                <ul>
                    <li><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
            <li><a href="#"<Categories 2</a>
                <ul>
                    <li><a href="#">temp1</a></li>
                    <li><a href="#">temp2</a></li>
                    <li><a href="#">temp3</a></li>
                </ul>
            </li>
        </nav>

CSS:

#menu {
  background-color: #0000FF;
  height: 20px;
  padding: 15px 0 10px;
  margin-bottom: 20px;
  font: 12px 'DroidSansBold', Tahoma,sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 3px 2px 3px #000;
  border-radius: 5px;
  text-align: center;
} 

#menu li{
  display: inline;
}

#menu li a {
  color: #fff;
  text-decoration: none;
  margin: 0 120px;
}

#menu li ul li{
  display: none;
}

#menu li a:hover{
  color: #dc692e;
}

結果は次のようになります。ここに画像の説明を入力

私の 2 つのカテゴリが css を受け入れない理由がわかりませんdisplay: inline。現在表示されていない各カテゴリの下にメニューがあります。「アンダーメニュー」を削除すると、display:inline機能します。

JsFiddle が機能しない: http://jsfiddle.net/LynwV/

すべての助けに感謝します!

4

4 に答える 4

3

@claustrofobは正しい、inline-block解決策です。ただし、@Zenithも正しいです。マークアップを修正する必要があります。また、長い要素セレクター チェーンの代わりにスタイルを記述する方法を変更し、対象とする要素にクラスを配置してそのようにスタイルを設定します。

于 2013-06-24T16:49:40.790 に答える
1

あなたのタグが間違っています。<li><a href="#"<Categories 2</a>する必要があります<li><a href="#">Categories 2</a>。そして、@Zenith が言ったように、nav の直後に LI 要素を続けることはできません。

于 2013-06-24T16:49:00.147 に答える
1

試す、

#menu li{
    display: inline-block;
}

@Zenith によって指摘されたように無効なマークアップがあり、@Josefffs によって指摘されたように構文が壊れています。

リンクのテスト

于 2013-06-24T16:49:01.260 に答える
0

私が見る問題は、タグで定義されたリストを、アイテムのリストを隠しているように見える<ul>別のタグでラップしたことです。<li>

サポートのために inspect 要素も試してください。

于 2013-06-24T16:58:09.833 に答える