无序列表子菜单水平

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; 
} 

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