Html 带有垂直子菜单/下拉菜单的水平css菜单。请帮忙_Html_Css_Drop Down Menu_Menu_Submenu

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

html css drop-down-menu menu

Html 带有垂直子菜单/下拉菜单的水平css菜单。请帮忙,html,css,drop-down-menu,menu,submenu,Html,Css,Drop Down Menu,Menu,Submenu,请帮我找到解决办法。我正在尝试做的是一个水平css菜单和垂直下拉子菜单。现在它显示了一个水平的子菜单，是新的，我很惊讶。请帮忙小提琴：正文，div，p，h1，h2，h3，h4，h5，span{margin:0；padding:0；} div.spheader{宽度：100%；背景：999；高度：31px；} .spheader ul.spmenu{ 右边框：1px实心#333；边际：0.12px；位置：相对位置；宽度：自动； } ul.spmenu{ 列表样式：无；位置：相对位

请帮我找到解决办法。我正在尝试做的是一个水平css菜单和垂直下拉子菜单。现在它显示了一个水平的子菜单，是新的，我很惊讶。请帮忙

小提琴：


正文，div，p，h1，h2，h3，h4，h5，span{margin:0；padding:0；}
div.spheader{宽度：100%；背景：999；高度：31px；}
.spheader ul.spmenu{
右边框：1px实心#333；
边际：0.12px；
位置：相对位置；
宽度：自动；
}
ul.spmenu{
列表样式：无；
位置：相对位置；
显示：内联表；
}
spheader ul.SPLI{
显示：内联；
字体大小：13px；
列表样式：无外无；
保证金：0；
填充：0；
}
ul.spli{
高度：31px；
文本转换：大写；
}
美国保险商协会{
背景图像：无；
左边框：1px实心#333；
右边框：1px实心#555；
高度：31px；
显示：块；
}
美国保险商协会{
文字装饰：无；
颜色：#FFFFFF；
显示：内联；
浮动：左；
字体大小：粗体；
线高：30px；
位置：相对位置；
填充：0 10px；
字体系列：Arial，Helvetica，“Arial Unicode MS”，无衬线；
}
斯普海德尔{
显示：无；
}
.spheader ul li:悬停>ul{
显示：块；
}
斯普海德：之后{
内容：；清除：两者；显示：块；
}
斯普海德尔{
背景：#DDD；填充：0；
位置：绝对；顶部：100%；
}
斯普海德·乌利先生{
浮动：无；
边框顶部：1px实心#6b727c；
边框底部：1px实心#575f6a；
位置：相对位置；
}
斯普海德·乌尔·李先生{
填充：0px 12px；
颜色：#fff；
位置：相对位置；
显示：块；
}   
斯海德·乌尔·李a：悬停{
背景：#ccc；
}
ul.spli菜单ul li{
明确：两者皆有；
边框样式：无；}

我认为这正是您想要的：

基本上，我已经将LI替换为内联块和相对块因此UL的底部将正确定位。。和子菜单“显示”块中的LI

css

如果你有什么问题尽管问。。祝你好运

“>”规则与直系子女相关，因此ul>ul将不适用。。需要ul>li>ul:：：尝试更新代码。更新：不工作。它仍然显示相同的下拉列表。我希望你的李的子菜单是“内联的”。。这就是为什么他们站在同一条线上。。

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

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