带有垂直子/下拉菜单的水平 css 菜单。请帮忙答案

【问题标题】：Horizontal css menu with vertical sub/drop down menu. Help please带有垂直子/下拉菜单的水平 css 菜单。请帮忙
【发布时间】：2014-09-07 12:22:08
【问题描述】：

请帮助找到解决方案。我想要做的是一个带有垂直下拉子菜单的水平 css 菜单。目前它显示一个水平子菜单，是新的，我很震惊。请帮忙

小提琴：http://jsfiddle.net/o0v9xzsv/5/

<html>
<head>
<style>

body, div, p, h1, h2, h3, h4, h5, span { margin: 0; padding:0; }

div.spheader { width:100%; background: #999; height:31px;}
.spheader ul.spmenu {

    border-right: 1px solid #333;

    margin: 0 12px;
    position: relative;
    width: auto;
}
ul.spmenu {
    list-style: none;
    position: relative;
    display: inline-table;
}

.spheader ul.spmenu li {
    display: inline;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

ul.spmenu li {
    height: 31px;
    text-transform: uppercase;
}

ul.spmenu li a{
    background-image: none;
    border-left: 1px solid #333;
    border-right: 1px solid #555;
    height: 31px;
display: block;
}

ul.spmenu  li a {
    text-decoration:none;
    color: #FFFFFF;
    display: inline;
    float: left;
    font-weight: bold;
    line-height: 30px;
    position: relative;
    padding: 0 10px;
    font-family: Arial,Helvetica,"Arial Unicode MS",sans-serif;
}


.spheader ul ul {
    display: none;
}

.spheader ul li:hover > ul {
        display: block;
    }

.spheader ul:after {
        content: ""; clear: both; display: block;
    }


.spheader ul ul {
    background: #DDD;  padding: 0;
    position: absolute; top: 100%;
}
.spheader ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
.spheader ul ul li a {
            padding: 0px 12px;
            color: #fff;
            position: relative;
            display: block;
        }   
.spheader ul ul li a:hover {
                background: #ccc;
            }

ul.spmenu  li ul li{
    clear:both;
    border-style:none;}

</style>
<head>
</body>
<br/><br/><br/>
<div class="spheader" style="width:100%;">

<ul class="spmenu">
<li><a href="">Home</a></li>
<li><a href="">WITH SUBMENU</a>
<ul>
<li><a href="">SUB ONE</a></li>
<li><a href="">SUB TWO</a></li>
<li><a href="">SUB THREE</a></li>
</ul>
</li>

<li><a href="">SECOND SUB</a>
<ul>
<li><a href="">Cricket</a></li>
<li><a href="">Football</a></li>
<li><a href="">Tennis</a></li>
</ul>
</li>



<li><a href="">Vehicle</a>
<ul>
<li><a href="">Car</a></li>
<li><a href="">Bike</a></li>
<li><a href="">Bus</a></li>
</ul>
</li>

</ul>
</body>
</html>

【问题讨论】：

'>' 规则与直接子级相关，因此 ul > ul，不会捕获.. 需要 ul > li > ul ::: 尝试更新您的代码。
更新：jsfiddle.net/o0v9xzsv/6 不工作。它仍然显示相同的下拉列表。我想要垂直的子菜单
你的 li 是 'inline'.. 这就是为什么它们在同一行..

标签： html css drop-down-menu menu submenu

【解决方案1】：

我认为这正是你想要的：

Fiddle

基本上，我已将 LI 替换为 inline-block 和 relative 所以下面的 UL 会正确定位.. 并且子菜单中的 LI 会显示为 BLOCK。

css

.spheader ul.spmenu li {
    display: inline-block;
    height: 31px;
    font-size: 13px;
    list-style:none;
    position:relative;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}
.spheader ul li ul > li {
    display:block !important;
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
    width:100%;
}

如果您有任何问题，请随时...祝您好运！

【讨论】：