如何创建嵌套的CSS水平菜单？

Question

我已经查看了来自stakoverflow网站的帖子，但它不能完全解决我的问题。 我的问题是我的导航菜单宽度设置为100％，并且我不确定如何控制子菜单或嵌套的UL菜单。 这是jsFiddle链接 。 “字符”下的子菜单是我正在使用的有问题的菜单。 如果我调整浏览器窗口的大小，则子菜单的位置会改变。

<nav>
  <ul>
    <li><a href="../">HOME</a></li>
    <li><a href="#">CHARACTER</a>
      <ul>
        <li><a href="#" target="_blank">Bill</a></li>
        <li><a href="#" target="_blank">Till</a></li>
        <li><a href="#" target="_blank">Cill</a></li>
        <li><a href="#" target="_blank">Will</a></li>
      </ul>
    </li>
    <li><a href="#">HISTORY</a></li>
    <li><a href="#">STORY</a></li>
  </ul>
</nav>

任何帮助深表感谢。

Answer 1

尝试添加“浮动：左侧；宽度：100％；” 进入你的ul在CSS。 因此，HTML是：

 <nav>
  <ul>
    <li><a href="../">HOME</a></li>
    <li><a href="../exercise/chapter9/">CHARACTER</a>
      <ul class="sub-menu">
        <li><a href="../exercise/chapter9/form1.html" target="_blank">Bill</a></li>
        <li><a href="../exercise/chapter9/form2.html" target="_blank">Till</a></li>
        <li><a href="../exercise/chapter9/form3.html" target="_blank">Cill</a></li>

这是CSS：

/*THIS IS THE NAVATION MENU */
nav {
    list-style:none;
    text-align:center;
    width: 100%;/*margin:20px;*/
    padding: 0;
    margin: 0 auto;
}

nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
    z-index: 999;
}
nav ul {
    float: left;
    width:100%;
    background: #efefef;
    background: linear-gradient(top, #1295D8 0%, #005581 100%);
    background: -moz-linear-gradient(top, #1295D8 0%, #005581 100%);
    background: -webkit-linear-gradient(top, #1295D8 0%, #005581 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    /*padding: 0 20px;
    border-radius: 10px;  */
    list-style: none;
    position: relative;/*display: inline-table;*/
}
nav ul:after {
    content: "";
    clear: both;
    display: block;
    width:100%;
    margin:0 auto;
}
nav ul li {
    /*float: left;*/
    display: inline;
    padding: 13px 20px;
    position: relative;
}
nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #78A4BF 0%, #2E4559 40%);
    background: -moz-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
    background: -webkit-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
}
nav ul li:hover a {
    color: #fff;
}
nav ul li a {
    display: inline-block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
}
nav ul .sub-menu {
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0%;
    float: left;
}
nav ul ul li {
    padding: 13px 0;
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
nav ul ul li a {
    /*padding: 13px 20px;*/
    color: #fff;
}
nav ul ul li a:hover {
    /*background: #4b545f;*/
    background: #4b545f;
    background: linear-gradient(top, #78A4BF 0%, #2E4559 40%);
    background: -moz-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
    background: -webkit-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
    /*padding: 13px 20px;*/
}
nav ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}

Answer 2

如果我正确理解了您的意思，那么这应该是您所需要的解决方法。

通过添加2个CSS规则，应该可以解决问题。

nav ul li {
    position: relative;
    white-space: nowrap;
}

然后将导致子菜单如下所示。 http://snag.gy/MFEvw.jpg 。

这是小提琴

-

从我对菜单的体验中非常快地解释了这一点（大多数情况下它们很痛苦）

这里的问题是position: relative; 未设置在<li>里面的<ul>但它的设置对<ul>本身，这就是为什么在子菜单中继续移动到双方就调整大小，通过设置position: relative; 在<li>内的<ul>你做出相对定位在子菜单<li>而不是<ul>

您可以在CSS Tricks （伟大的文章）上阅读有关空白规则的更多信息。

我希望这能帮助您实现所需，祝您好运。