Question

我无法弄清楚为什么嵌套列表没有隐藏。我复制了一个我在uni工作的样式表（工作正常）几乎到了点。但我尝试的一切都可以隐藏第二层！

这可能非常简单，但是当你开始时间过长时我会得到那么空白。

/*Main Nav*/
#nav {
	height: 45px;
	width: 960px;
}
#nav li {
	text-align: center;
	display: inline-block;
	background-color:white;
	width: 188px;
	height: 35px;
	padding-top: 10px;
}
#nav li:hover {
	background-color: white;
}
#nav ul {
	list-style: none;
}
#nav a {
	text-decoration: none;
	color: black;
	}
#nav a:hover {
	color: white;	
}
/*Sub Nav*/
#nav li ul {
	display: none;
}
#nav li:hover ul {
	display: block;
	position: aboslute;
}
#nav li li {
	display: block;
	background-color: gray;
}
#nav li li:hover {
	background-color: white;
}

<div id="nav">
	<ul>
    	<li><a href="#1">News</a></li>
        <li><a href="#1">Music</a></li>
        	<ul>
            	<li><a href="#2">Artists</a></li>
                <li><a href="#2">Free Tracks</a></li>
                <li><a href="#2">Labels</a></li>
                <li><a href="#2">Genres</a></li>
            </ul>
        <li><a href="#1">School</a></li>
            <ul>
            	<li><a href="#2">Interviews</a></li>
                <li><a href="#2">Tips N Tricks</a></li>
                <li><a href="#2">Genre Class</a></li>
                <li><a href="#2">Promoters</a></li>
            </ul>
        <li><a href="#1">Events</a></li>
        	<ul>
            	<li><a href="#2">Coming Up</a></li>
                <li><a href="#2">Clubs</a></li>
                <li><a href="#2">Festivals</a></li>
            </ul>
        <li><a href="#2">About</a></li>
            <ul>
            	<li><a href="#2">Contact</a></li>
                <li><a href="#2">Upload Mix</a></li>
                <li><a href="#2">Shop</a></li>
            </ul>
    </ul>
</div>

先谢谢，这让我发疯了。

Answer 1

因为你在html中的语法错误，所以你没有将子ul放入li中，它不属于li。

正确的：

<li><a href="#1">Music</a>
    <ul>
        <li><a href="#2">Artists</a></li>
        <li><a href="#2">Free Tracks</a></li>
        <li><a href="#2">Labels</a></li>
        <li><a href="#2">Genres</a></li>
    </ul>
</li>

https://jsfiddle.net/xsoLvv9u/

Answer 2

没有嵌套列表（或者至少不是它应该的方式）。仔细看。

我认为这就是你真正想要的。

＆＃13;

/*Main Nav*/
#nav {
	height: 45px;
	width: 960px;
}
#nav li {
	text-align: center;
	display: inline-block;
	background-color:white;
	width: 188px;
	height: 35px;
	padding-top: 10px;
}
#nav li:hover {
	background-color: white;
}
#nav ul {
	list-style: none;
}
#nav a {
	text-decoration: none;
	color: black;
	}
#nav a:hover {
	color: white;	
}
/*Sub Nav*/
#nav li ul {
	display: none;
}
#nav li:hover ul {
	display: block;
	position: aboslute;
}
#nav li li {
	display: block;
	background-color: gray;
}
#nav li li:hover {
	background-color: white;
}

＆＃13;

<div id="nav">
	<ul>
    	<li><a href="#1">News</a></li>
        <li><a href="#1">Music</a>
        	<ul>
            	<li><a href="#2">Artists</a></li>
                <li><a href="#2">Free Tracks</a></li>
                <li><a href="#2">Labels</a></li>
                <li><a href="#2">Genres</a></li>
            </ul>
</li>
        <li><a href="#1">School</a>
            <ul>
            	<li><a href="#2">Interviews</a></li>
                <li><a href="#2">Tips N Tricks</a></li>
                <li><a href="#2">Genre Class</a></li>
                <li><a href="#2">Promoters</a></li>
            </ul>
</li>
        <li><a href="#1">Events</a>
        	<ul>
            	<li><a href="#2">Coming Up</a></li>
                <li><a href="#2">Clubs</a></li>
                <li><a href="#2">Festivals</a></li>
            </ul>
</li>
        <li><a href="#2">About</a>
            <ul>
            	<li><a href="#2">Contact</a></li>
                <li><a href="#2">Upload Mix</a></li>
                <li><a href="#2">Shop</a></li>
            </ul>
</li>
    </ul>
</div>

＆＃13;

Answer 3

你有很多问题。您应该了解html和css中的级别和次级概念。我已经在jsfiddle演示中解决了所有问题。看看吧。

<强> HTML

  <div id="nav">
   <ul>
    <li><a href="#1">News</a></li>
    <li><a href="#1">Music</a>
        <ul>
            <li><a href="#2">Artists</a></li>
            <li><a href="#2">Free Tracks</a></li>
            <li><a href="#2">Labels</a></li>
            <li><a href="#2">Genres</a></li>
        </ul>
    </li>
    <li><a href="#1">School</a>
        <ul>
            <li><a href="#2">Interviews</a></li>
            <li><a href="#2">Tips N Tricks</a></li>
            <li><a href="#2">Genre Class</a></li>
            <li><a href="#2">Promoters</a></li>
        </ul>
    </li>
    <li><a href="#1">Events</a>
        <ul>
            <li><a href="#2">Coming Up</a></li>
            <li><a href="#2">Clubs</a></li>
            <li><a href="#2">Festivals</a></li>
        </ul>
    </li>
    <li><a href="#2">About</a>
        <ul>
            <li><a href="#2">Contact</a></li>
            <li><a href="#2">Upload Mix</a></li>
            <li><a href="#2">Shop</a></li>
        </ul>
    </li>
  </ul>
 </div>

FIDDLE DEMO

超快速CSS嵌套列表不会隐藏

3 个答案: