gpt4 book ai didi

jquery - 列表中的列表问题

转载 作者:太空宇宙 更新时间:2023-11-03 17:26:18 25 4
gpt4 key购买 nike

我在使用 css 和 html 创建的子导航菜单时遇到了问题。

问题是当我希望它显示为列表时,第三级导航正在显示内联。将其显示为列表的最佳方式是什么?

我所做的一切似乎都不起作用,我认为这可能是 css 冲突的问题。

我已经包含了一个 jsfiddle 和代码。

https://jsfiddle.net/e52u02bL/

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>

<link rel="stylesheet" type="text/css" href="css/component.css" />

</head>
<body>

<div class="nav">
<ul class="nav-primary test">
<li><a href="#">Household</a>
<ul class="test">
<li><a href="#">Living Room</a></li>
<li><a href="#">Bedroom</a></li>
<li><a href="#">Living Room</a>
<ul>
<div><h4>Heading</h4></div>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Hardware</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Wedding List</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</body>
</html>

CSS

.nav {
width: 100%;
background: #FFF;
padding: 0;
margin: 0;
position:relative;
}

.nav ul {
background: #FFF;
list-style:none;
padding:0 20px;
margin: 0;
}

ul.test li {
display: inline-block;
}

.nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}

.nav ul li:hover {
background: #3B95D3;
}


.nav ul li:hover > a{
color:#FFFFFF;
}

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

.nav ul ul {
background: #FFF;
padding:0;
display:none;
width: 100%;
position: absolute;
top: 60px;
left: 0px;
}

.nav ul ul ul {
background: #3B95D3;
display:none;
width: 100%;
position: absolute;
top: 60px;
left: 0px;
}

.nav ul > li > ul > li > ul > li {
float:left;
background-color:red;
padding-top:;
width: 33.33333%;
}

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

div > h4 {color:#FFF; padding-left: 38px;}

@media screen and (max-width: 480px) {
.nav{
width: 100%;
float: none;
padding: 0 2em;
}

.nav ul {
width: 100%;
}

.nav ul li {
width: 100%;
}

}

最佳答案

试试这个新的 fiddle 。它可能不符合您的需要,但您可以调整宽度并插入 li header 。不要将 div 用作 ul 的直接后代。

new fiddle

.nav ul > li > ul > li > ul > li {
float:left; <-- this is one of your main problems.
background-color:red;
padding-top:;
width: 33.33333%;
}

希望对您有所帮助。

关于jquery - 列表中的列表问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31320436/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com