html - super 快速的 CSS 嵌套列表不会隐藏

Question

我一辈子都弄不明白为什么嵌套列表没有隐藏。我几乎复制了我在大学时所做的样式表(效果很好)。但我尝试的一切都可以隐藏第二层!

它可能非常简单，但是当你开始太久时，我会感到一片空白。

/*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语法错误，你没有把sub ul放到li里，是out of 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/