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

Question

我已经从stakoverflow网站查看帖子，但它并不完全解决我的问题。我遇到的问题是我的导航菜单宽度设置为100％，我不确定如何控制子菜单或嵌套的UL菜单。这里是jsFiddle link。 “CHARACTER”下的子菜单是我正在工作的有问题的菜单。如果我调整浏览器窗口的大小，那么子菜单的位置会改变。

<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

如果我明白你的意思正确，则这应该是你所需要的修复。

通过添加2条CSS规则，事情应该可能被修复。

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

然后它会导致子菜单看起来像这样。 http://snag.gy/MFEvw.jpg。

这里的Fiddle

-

解释这真快，从我的菜单经验（大部分时间他们是一个痛苦）

这里的问题是，position: relative;未设置在里面的<ul>，但它的设置在<ul>本身，这就是为什么子菜单不断移动到两边的调整大小，通过设置position: relative;<li>里面<ul>你mak e子菜单相对定位至<li>而不是<ul>。

您可以在CSS Tricks，Great article阅读更多有关空白规则的内容。

我希望这会帮助你实现你所需要的，祝你好运。

Answer 2

尝试添加“float：left; width：100％;”进入你的CSS在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; 
}