Question

我正在尝试将无序列表的子菜单设置为水平。我尝试过很多东西，包括：

浮动：离开显示：内联

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

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

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

您需要在<ul>内嵌套<li>，以使内部列表出现在旁边。您试图影响<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>

我设置它的方式是，如果任何父级中的类别是一个类别数组，它将向外移动，否则它将向下移动。这内置在我用于在菜单上生成列表的代码中。就像我说的那样，它有可能在类别列表中拥有无限嵌套列表，就像目录树一样。我在这个系统上投入了超过5k的预制类别，并且在我关闭之后没有问题。

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

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

无序列表子菜单水平

2 个答案: