Question

嘿，我正在学习如何使用css的下拉菜单，但我遇到了两个问题：

我的第一个下拉菜单的长度发生了变化，即使我一直在玩它们的百分比。
我无法带第二个下拉菜单，我想我不知道如何在css中调用第二个下拉菜单，即使我给它一个不同的类名。

以下是适用于下拉菜单的HTML代码：

<div class="list">
            <ul class="style">
                <li class="international"><a href="#">International</a>
                    <ul class="sub1">
                        <li class> <a href="#">Top 10</a></li>
                        <li> <a href="#"> All</a></li>
                    </ul>
                </li>
                <li class="pop"><a href="#">Pop</a>
                    <ul class="sub1" >
                        <li> <a href="#">Top 10</a></li>
                        <li> <a href="#"> All</a></li>
                    </ul>
                </li>
                <li class="electronic"><a href="electronic.html">Electronic</a>
                    <ul class="sub1">
                        <li> <a href="#">Top 10</a></li>
                        <li> <a href="#"> All</a>
                            <ul class="sub2">
                                <li> <a href="#">English</a></li>
                                <li> <a href="#">European</a></li>
                                <li> <a href="#">International</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>

            </div>

这是CSS代码：

div ul li {
    display:inline-block;
    background-color:#B2B28F;
    float:right;
    text-align: center;
    width: 22%;
    position: relative;
    z-index: 1;
    bottom: 19px;
    padding-top: 5px;
    font-size: 18px;
    padding-bottom: 3px;
    font-weight: bold;
    font-family: harrington;
    margin-right: 12px;
    border-bottom:5px;
    margin-bottom: 10px;
    text-align: center;
    margin-top: 2px;
}

div ul li a {
    display: block;
    height: 30px;
    text-align: center; 
    border-bottom:5px;
    position: relative;
    font-size: 20;
    z-index: 1;
    margin-top: 2px;
}




.sub1 li {
    display: none;
    position:relative;
    width:100%;
    height: 20px;
    margin-bottom:-8px;
    margin-top:12px ;
    float: right;
    font-size: 17;
    margin-right: 4px;
    padding: 2px;
    text-align: center;
    left:-20px;
}

.sub1 li a {
    text-align: left;
    margin-right: 15px;


}

.sub2 li {
    position: relative;
    left: 15px;
    top: -30px; 
    width: 100%;
    text-align: left;
    margin-top: -3px;
    margin-bottom: 4px;
    display: none;
    float: left;
}

div ul li:hover ul li{
    display: block;
    position: absolute;
    top: 27px;
    float: left;
    width: 97%;
    left: 0px;
    height: 23px;
    border-top: 5px;
    text-align: center; 
}



div ul li :hover ul li ul li {
    display: block;
    position: absolute;
    text-align: center;
}


a:link {
    text-decoration: none;
}

a:visited {
    color:#520029;
}

a:hover {
    color: #293D66;
}

也有任何关于我如何做的评论将不胜感激！

Answer 1

希望你喜欢这个.. 只是对您的html和css进行了一些更改。

HTML：

<div class="nav">
    <ul>
        <li><a href="#">International</a>
            <ul>
                <li> <a href="#">Top 10</a></li>
                <li> <a href="#"> All</a></li>
            </ul>
        </li>
        <li><a href="#">Pop</a>
            <ul>
                <li> <a href="#">Top 10</a></li>
                <li> <a href="#"> All</a></li>
            </ul>
        </li>
        <li><a href="electronic.html">Electronic</a>
            <ul>
                <li> <a href="#">Top 10</a></li>
                <li> <a href="#"> All</a>
                    <ul>
                        <li> <a href="#">English</a></li>
                        <li> <a href="#">European</a></li>
                        <li> <a href="#">International</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS：

.nav {
    margin: 50px auto; 
    text-align: center;
}

.nav ul ul {
    display: none;
}

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


.nav ul {
    background: #C0C0C0; 

    padding: 0 20px;

    list-style: none;
    position: relative;
    display: inline-table;
}
.nav ul:after {
    content: ""; clear: both; display: block;
}

.nav ul li {
    float: left;
}
.nav ul li:hover {
    background: #4b545f;
}
.nav ul li:hover a {
    color: #fff;
}

.nav ul li a {
    display: block; padding: 10px 20px;
    color: #757575; text-decoration: none;
}


.nav ul ul {
    background: #5f6975; padding: 0;
    position: absolute; top: 100%;
}
.nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a; position: relative;
}
.nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}   
.nav ul ul li a:hover {
    background: #4b545f;
}

.nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

这也是小提琴，Check this working here

Answer 2

我建议不要使用绝对定位和浮动到不需要它的元素..

关于你的第二个子，我在这个例子中得到了它。

div > ul > li {
    display:inline-block;
    background-color:#B2B28F;
    float:right;
    text-align: center;
    width: 22%;
    position: relative;
    z-index: 1;
    bottom: 19px;
    padding-top: 5px;
    font-size: 18px;
    padding-bottom: 3px;
    font-weight: bold;
    font-family: harrington;
    margin-right: 12px;
    border-bottom:5px;
    margin-bottom: 10px;
    text-align: center;
    margin-top: 2px;

}

div ul li a {
    display: block;
    text-align: center;
    padding:5px 0;
    position: relative;
    font-size: 20px;
    z-index: 1;
    color:#212121;  
     padding-left:10px; box-sizing:border-box;
}

ul { padding:0;}
ul li { list-style:none;}
.sub1 { display:none; width:100%;}



.sub1 li {
    position:relative;
    width:100%;
    clear:both;
    font-size: 17px;
    text-align: center;
}


.sub1 li a {
    text-align: left;


}

.sub2 { display:none; position: relative; background:#B2B28F;}
.sub2 li {

    width: 100%;
    text-align: left;
    margin-bottom: 4px;
    padding-left:20px;
    box-sizing:border-box;

}
.sub2 li a { font-size:14px;}
div ul li:hover ul li{

    width: 100%;
    left: 0px;
    border-top: 5px solid;
    text-align: center; 
}
div  ul li:hover > ._sub  { display:block;}




a:link {
    text-decoration: none;
}

a:visited {
    color:#520029;
}

a:hover {
    color: #293D66;
}

http://jsfiddle.net/2mSzr/

请注意我使用'＆gt;'制定了更具体的规则css中的选项，因此样式规则不会适用于错误的元素..

同样在HTML中我将_sub类添加到所有子菜单中，并更改了行为，因此display：none / block将在实际的ul._sub元素上，而不是在它们的li上..它只是更有意义..

回顾上面的例子，如果您有任何问题，请告诉我。

css和html下拉菜单

2 个答案: