1

MVC4 (レスポンシブ)、HTML5、および CSS3 を使い始めています。

新しい MVC4 プロジェクトを作成しました。ナビゲーション メニューにサブ項目を追加したいのですが、応答性を維持するために現在の構造を維持したいのですが、サブ項目を追加したいだけです。

HTML は次のようなものです。

<nav>
  <ul id="menu">
    <li>@Html.ActionLink("Menu 1", "Index", "Home")
      <ul>
        <li><a href="#">Sub 1.1</a></li>
        <li><a href="#">Sub 1.2</a></li>
        <li><a href="#">Sub 1.3</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS は次のようになります。

/* menu */
nav {
    margin-bottom: 5px;
}

ul#menu {
    margin: 0;
    padding: 0;
    text-align: center;
}

ul#menu li {
    margin: 0;
    padding: 0;
}

ドロップダウン メニューを作成するには、どのような変更を行う必要がありますか?

4

1 に答える 1

4

<ul>の中に別のものをネストします<li>

<ul>
  <li><a href="#">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
  <li>
    <a href="#">Menu4</a>
    <ul class='nested'>
        <li><a href="#">SubMenu1</a></li>
        <li><a href="#">SubMenu2</a></li>
        <li><a href="#">SubMenu3</a></li>
    </ul>
  </li>
</ul>

次に、ネストされた ul にスタイルを設定して、ユーザーが親の上にマウスオーバーを実行するまでそれを非表示にする必要があります<li>。

#nav ul{
    display : none;
}
#nav li:hover > ul{
    display : block;
}

ここにあなたが見るためのフィドルがあります：http://jsfiddle.net/8QtaL/6/

これは純粋な html / css ソリューションです。jQuery や JavaScript はありません。

于 2013-03-19T13:13:21.060 に答える