Question

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

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

Answer 1

我认为这几乎是你想要的：

Fiddle

基本上，我已将LI替换为内联块和相对块所以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%;
}

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

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

1 个答案:

CSS