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 上的一些样式来隐藏它，直到用户在 parent 上执行鼠标悬停<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 回答