Question

我一直在使用css和html创建的子导航菜单出现问题。

问题是当我希望它显示为列表时，第三级导航显示为内联。将此显示作为列表的最佳方法是什么？

我所做的一切似乎都没有用，认为这可能是css冲突的问题。

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

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

}

Answer 1

试试这个新小提琴。它粗糙到你可能需要的但你可以调整宽度并插入一个li标题。不要使用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%;
}

希望它有所帮助。

列表内列表的问题

1 个答案: