Question

我开始使用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;
}

制作下拉菜单需要做哪些更改？

Answer 1

您将另一个<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。

MVC 4将子项添加到导航菜单

1 个答案: