html - 无序列表子菜单水平

Question

我正在尝试使无序列表的子菜单水平。我尝试了很多东西，包括:

float :左显示:内联

这些似乎在其他地方被推荐给面临类似问题的人。但是，当“子菜单按钮”悬停时，我无法让我的子菜单水平。

如您所知，这是构成网站的主导航菜单。

我的 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/