如何創建嵌套的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; 
}