html - 子子菜单代码损坏？

Question

不确定我哪里出错了。似乎无法让我的子子菜单显示在“Supai”选项卡下。我哪里错了？我可以让 Sub Menu 工作，但不知何故 Sub Sub 不会显示。呃

此外，我相信您已经厌倦了这些 Sub Sub Menu 问题。我仔细研究了它们，甚至使用了本网站响应中使用的确切代码。它们工作正常......直到我将它们粘贴到我的 blogger 博客中。认为 Blogger 代码本身可能有一些对我不利的东西。想法？

#cssnav {
     float: left;
    font: bold 12px Verdana, Helvetica, Sans-serif;
     border: 2px solid #74BA94;
     border-top: 1px solid #747BBA;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     overflow: hidden;
}

#cssnav ul {
 margin:0;
 padding:0;
 list-style:none;
}

#cssnav ul li {
 float:left;
}

#cssnav ul li a {
    float: left;
 color:#EA1047;
     padding: 10px 20px;
 text-decoration:none;
     background:#3F10EA;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#cssnav ul li a:hover,
#cssnav ul li:hover > a {
     color: #252525;
     background:#3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#cssnav li ul a:hover, 
#cssnav ul li li:hover > a  {
    color: #2c2c2c;
   background: #5C9ACD;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
     border-bottom: 1px solid rgba(0,0,0,0.6);
     border-top: 1px solid #7BAED9;
     text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#cssnav li ul {
     background:#3C4042;
     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
     background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     border-radius: 0 0 10px 10px;
     -moz-border-radius: 0 0 10px 10px;
     -webkit-border-radius: 0 0 10px 10px;
     left: -999em;
     margin: 35px 0 0;
     position: absolute;
     width: 160px;
     z-index: 9999;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     border: 1px solid rgba(0, 0, 0, 0.5);
}

#cssnav li:hover ul {
     left: auto;
}

#cssnav li ul a {
     background: none;
     border: 0 none;
     margin-right: 0;
     width: 120px;
     box-shadow: none;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     border-bottom: 1px solid transparent;
     border-top: 1px solid transparent;
}

#cssnav li li ul {
     margin: -1px 0 0 160px;
     -webkit-border-radius: 0 10px 10px 10px;
     -moz-border-radius: 0 10px 10px 10px;
     border-radius: 0 10px 10px 10px;
     visibility:hidden;
}

#cssnav li li:hover ul {
     visibility:visible;
}

#cssnav ul ul li:last-child > a {
 -moz-border-radius:0 0 10px 10px;
 -webkit-border-radius:0 0 10px 10px;
 border-radius:0 0 10px 10px;
}

#cssnav li:hover ul ul {
  display:none; // hide the unordered list that is inside the unordered list
}
#cssnav li ul li:hover ul {
  display:block; // display the unordered list in the same way as your sub menu
}
#cssnav ul ul ul li:first-child > a {
 -moz-border-radius:0 10px 0 0;
 -webkit-border-radius:0 10px 0 0;
 border-radius:0 10px 0 0;
}

<!doctype html> 
<div id="cssnav">
<ul>
	<li><a href="www.example.com">Home</a></li>
	<li><a href="http://www.example.com/p/about-me.html">About Me</a></li>
	<li><a href="http://www.example.com/p/joc-series.html">JOC: Book Series</a></li>
	<li><a href="http://www.example.com/p/adventures.html">Adventures</a>
		<ul>
			<li><a href="http://www.example.com/p/adventures.html#SUP">Supai</a></li>
				<ul>
					<li><a href="#">Supai Walkthrough</a></li>
					<li><a href="#">The Drive</a></li>
					<li><a href="http://www.example.com/p/adventures.html#HTP">Hilltop</a></li>
					<li><a href="http://www.example.com/p/adventures.html#TRK">VillageTrek</a></li>
					<li><a href="http://www.example.com/p/adventures.html#VLG">Village</a></li>
					<li><a href="http://www.example.com/p/adventures.html#NJF">Navajo Falls</a></li>
					<li><a href="http://www.example.com/p/adventures.html#HSF">Havasu Falls</a></li>
					<li><a href="http://www.example.com/p/adventures.html#CMP">Campground</a></li>
					<li><a href="http://www.example.com/p/adventures.html#MNF">Mooney Falls</a></li>
					<li><a href="http://www.example.com/p/adventures.html#BTK">Beaver Trek</a></li>
					<li><a href="http://www.example.com/p/adventures.html#BVF">Beaver Falls</a></li>
					<li><a href="http://www.example.com/p/adventures.html#CTK">Colorado River Trek</a></li>
					<li><a href="http://www.example.com/p/adventures.html#CRV">Colorado River</a></li>
				</ul>
			<li><a href="http://www.example.com/p/adventures.html#NSW">Never Summer Wilderness</a></li>
			<li><a href="http://www.example.com/p/adventures.html#RRG">Red River Gorge</a></li>
			<li><a href="http://www.example.com/p/adventures.html#YEL">Yellowstone</a></li>
			<li><a href="http://www.example.com/p/adventures.html#SNP">Sequoia Nat'l Park</a></li>
		</ul>
	<li><a href="http://www.example.com/p/contest.html">Contest</a></li>
	<li><a href="http://www.example.com/p/fire.html">Fire Basics</a>
</li></li></ul>
</div>

</!doctype>

Answer 1

每个子菜单 ul 都必须位于上级菜单的 li 元素的内部，所以这段代码...

<li><a href="http://www.journeysofthecrew.com/p/adventures.html#SUP">Supai</a></li>
    <ul>
        <li><a href="#">Supai Walkthrough</a></li>
        <li><a href="#">The Drive</a></li>
          [ etc. ]
        <li><a href="http://www.journeysofthecrew.com/p/adventures.html#CRV">Colorado River</a></li>
     </ul>

……应该是

<li><a href="http://www.journeysofthecrew.com/p/adventures.html#SUP">Supai</a>
    <ul>
       <li><a href="#">Supai Walkthrough</a></li>
       <li><a href="#">The Drive</a></li>
       [ etc. ]
       <li><a href="http://www.journeysofthecrew.com/p/adventures.html#CRV">Colorado River</a></li>
     </ul>
</li>

(移动结束 li 标签)