無序列表子菜單水平

Question

我想做一個無序列表的子菜單水平。我已經試過的東西負載，包括：

浮動：左 顯示：內聯

這些似乎已經面臨着類似的問題，其他地方的人reccommended。但是，當「子菜單按鈕」懸停時，我無法讓我的子菜單處於水平狀態。

正如你可以告訴這是形成一個網站的主要導航菜單。

我的HTML代碼是在這裏：

<ul id="menu" > 
    <li><a href="#">Home</a></li> 
    <li class="sub"> 
    <a href="#">Sub Menu Button</a> 
    <ul> 
    <li><a href="#">Button 1</a></li> 
    <li><a href="#">Button 2</a></li> 
    <li><a href="#">Button 3</a></li> 
    <li><a href="#">Button 4</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Button 5</a></li> 
    <li><a href="#">Button 6</a></li> 
    <li><a href="#">Button 7</a></li> 
    </ul> 

我的CSS代碼是在這裏：

#menu { 
    margin: 0; 
    padding: 0.15%; 
    background: #201f5f; 
    height: 3em; 
    list-style: none; 
    font-family:arial; 
    } 

    #menu > li { 
    height: 100%; 
    margin-right: 0.5em; 
    padding: 0 1em; 
    background:#201f5f; 
    } 

    #menu > li > a { 
    height: 3em; 
    color: #ffffff; 
    text-decoration: none; 
    line-height: 3; 
    font-weight: bold; 
    text-transform: uppercase; 
    } 

    #menu > li > a:hover { 
    color: #41A044; 
    text-decoration: underline; 
    } 

    #menu > li.sub { 
    position: relative; 
    } 

    #menu > li.sub ul { 
    margin: 0; 
    padding: 0.5em 0; 
    list-style: none; 
    background: #000000; 
    position: absolute; 
    top: -1000em; 
    } 

    #menu > li.sub ul li { 
    width: 90%; 
    margin: 0 auto 0.3em auto; 
    } 

    #menu > li.sub ul li a { 
    height: 100%; 
    display: inline; 
    float: left; 
    padding: 0.4em; 
    color: #fff; 
    font-weight: bold; 
    text-decoration: none; 
    } 

    #menu > li.sub ul li a:hover { 
    background: #41A044; 
    text-decoration: underline; 
    } 

    #menu > li.sub:hover ul { 
    top: 3em; 
    } 

    #menu{ 
    text-align:center; 
    } 

    li{ 
    display:inline-block; 
    } 

我非常新HTML和CSS，所以我道歉，如果代碼是一個爛攤子，然而，它的確如我所說的那樣工作，我希望子菜單變成水平而不是垂直。

任何幫助將不勝感激。

Answer 1

更新你的CSS是這樣的具有固定寬度有佈局的更好的控制：

看到它執行在這裏：http://jsfiddle.net/ShADm/6/

#menu { 
    margin: 0; 
    padding: 0.15%; 
    background: #201f5f; 
    height: 3em; 
    list-style: none; 
    font-family:arial; 
    width: 800px; 
    } 

    #menu > li { 
    height: 100%; 
    margin-right: 0.5em; 
    padding: 0 1em; 
    background:#201f5f; 
    } 

    #menu > li > a { 
    height: 3em; 
    color: #ffffff; 
    text-decoration: none; 
    line-height: 3; 
    font-weight: bold; 
    text-transform: uppercase; 
    } 

    #menu > li > a:hover { 
    color: #41A044; 
    text-decoration: underline; 
    } 

    #menu > li.sub { 
    position: relative; 
    } 

    #menu > li.sub ul { 
    margin: 0; 
    padding: 0.5em 0; 
    list-style: none; 
    background: #000000; 
    position: absolute; 
    top: -1000em; 
    left: -160px; 
    width: 803px; 
    } 


    #menu li.sub ul li a { 
    height: 100%; 
    display: inline; 
    float: left; 
    padding: 0.4em; 
    color: #fff; 
    font-weight: bold; 
    text-decoration: none; 
    } 

    #menu > li.sub ul li a:hover { 
    background: #41A044; 
    text-decoration: underline; 
    } 

    #menu > li.sub:hover ul { 
    top: 3em; 
    } 

    #menu{ 
    text-align:center; 
    } 

    li{ 
    display:inline-block; 
    } 

這裏的影響：http://jsfiddle.net/ShADm/6/

Answer 2

#menu li>ul{ 

position:absolute; 
visibility:hidden; 
} 

#menu li:hover>ul{ 

position:relative; 
visibility:visible; 
} 

你需要走出去嵌入在<li>內的<ul>，以使內部列表出現在旁邊。您更傾向於影響<ul>的結果，而不是列表項。

我最近提出，都可能有類的無限嵌套列表菜單和我建立的菜單基本上是這樣的：

<ul class="menu"> 
<ul id="menu"> 
    <li class="menu_side"><a href="" name="categories">Categories</a> 
     <ul> 
      <li class="menu_down"><a href="" name="new">New</a> 
       <ul> 
        <li><a href="" name="abc">Abc</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 
</ul> 

我把它的方式是，如果任何父內的類別是它將移動到一側，否則它會向下移動。這是內置於我用來在我的菜單上生成列表的代碼中。就像我說的那樣，它有可能在目錄列表中有無限的嵌套列表，就像目錄樹一樣。我在這個系統上投入了超過5千個預先製作的類別，並且在我把它解決後它沒有任何問題。

ul#menu li ul{ 

    visibility:hidden; 
    position:absolute; 
    opacity:0; 
    box-shadow:0px 0px 2px #000; 
    background-color:#004080; 
    padding:0; 
    } 

ul#menu .menu_side ul{ 

    visibility:hidden; 
    opacity:0; 
    position:absolute; 
    left:0%; 
    top:-25px; 
    } 
ul#menu .menu_side:hover>ul{ 

    visibility:visible; 
    opacity:1; 
    position:relative; 
    left:100%; 
    top:-25px; 
    z-index:1; 
    } 

ul#menu .menu_down ul{ 

    visibility:hidden; 
    opacity:0; 
    position:absolute; 
    top:0%; 

    } 


ul#menu .menu_down:hover>ul{ 

    visibility:visible; 
    opacity:1; 
    position:relative; 
    z-index:1; 
    background-color:#6666ff; 
    } 
ul#menu .menu_side:hover{ 
    height:25px; 
} 

這可能不是最有效的方法，但它爲我完成了工作。