2

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

浮动：左显示：内联

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

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

我的 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 都非常陌生，所以如果代码一团糟，我深表歉意，但是，正如我所说的那样，它确实有效，我希望子菜单变为水平而不是垂直。

任何帮助将不胜感激。

4

2 回答 2

2

将您的 CSS 更新为具有固定宽度的这样，以便更好地控制您的布局：

在这里执行：http: //jsfiddle.net/ShaADm/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/ShaADm/6/

于 2013-04-22T21:15:30.290 回答
0 
#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;
}

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

于 2013-04-22T21:32:33.520 回答