如何风格化二级下拉菜单列表

Question

我制作了一个下拉菜单，它适用于顶级项目。 但我不知道要为二级菜单项添加什么 CSS，将它们移动到悬停项的右侧。

这是我的 HTML 内容：

<ul class="menu">
<li><a href="#" >item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a>
    <ul>
        <li><a href="#">subitem1</a></li>
        <li><a href="#">subitem2</a></li>
        <li><a href="#">subitem3</a>
            <ul>
                <li><a href="#">subsubitem1</a></li>
                <li><a href="#">subsubitem2</a></li>
            </ul>
        </li>
        <li><a href="#">subitem4</a></li>
        <li><a href="#">subitem5</a></li>

    </ul>
</li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>

还有我的实际 CSS：

.menu {
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
}

.menu ul {
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}

.menu li {
    float:left;
    padding:0px;
}

.menu li a {
    background:#333333 url("seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
    background: #2580a2 url("hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}

.menu li ul {
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
}

.menu li:hover ul {
    display:block;
}

.menu li li {
    background:url('sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
}

.menu li:hover li a {
    background:none;
}

.menu li ul a {
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a {
    background:#2580a2 url('hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}

jsfiddle

我正在尝试做一个列表菜单的子菜单的子菜单，并告诉这可能有效，但我不知道如何将它添加到 css。如果将其放入 css 中，样式将适用于它。

[已解决] 好的，所以我设法解决了这个问题（现在我只需要设置宽度和悬停的样式）。我所做的是从下面的答案中插入 css，并添加到这个 css 中

.tabs .widget ul, .tabs .widget ul {
    margin: 0;
    padding: 0;
    overflow: visible;
    list-style: none;
}

由于某种原因，它被设置为 { overflow:hidden ; }（wtf！）所以我改变了它，现在它似乎正确溢出了。

在菜单html中，我改了

<ul>
    <li><a href="#" >item1</a></li>
    ....
</ul>

到

<ul class="menu_top">
    <li><a href="#" >item1</a></li>
    ....
</ul>

在给定 html 的第一行。 现在我需要做的就是样式 {width:225px; } 并更改 :hover 元素，感谢大家的帮助！

Answer 1

您可以使用以下 CSS：

ul.menu_top {
    float:left;
    width:70%;
    margin: 8px 100px 0 0;
    border-radius:4px;
    background-color: #c4092a;
    list-style-type: none;
    z-index:+1;
}
ul.menu_top li {
    float: left;
    position: relative;
    margin: 4px 2em 4px 4px;
    padding: 0;
}
ul.menu_top li ul {
    visibility: hidden;
    position: absolute;
    top:100%;
    left:0px;
    padding:0.5em;
    list-style-type: none;
    white-space:nowrap;
    background-color: #c4092a;
    border: 1px solid white;
    border-radius:4px;
    z-index:+1;
}
ul.menu_top li:hover > ul {
    visibility: visible;
    z-index: +2;
}
ul.menu_top li ul li {
    padding: 0;
    margin: 12px 4px;
    float:none;
    border:0;
    min-width:3em;
}
ul.menu_top li ul li ul {
    top:0;
    left:99%;
}
ul.menu_top a {
    background-color:#c4092a;
    color:white;
    text-decoration:none;
    padding:4px;
    font-size:18px
}
ul.menu_top a:hover, ul.menu_top a.haschildren.childselected, ul.menu_top a.selected {
    background-color:white;
    color:blue;
    text-decoration:none;
}
ul.menu_top li a.haschildren:after {
    content:"\00A0\00A0\25BC";
}
a {
    color:#0000aa;
    background-color:inherit;
}
body, ul, li { /* normalize for old browsers*/
    margin:0;
    padding:0;
}

取自我的old question。 .menu_top 类仅用于区分导航菜单和其他无序列表。

JSFiddle code & result page