0
我目前正在爲網站導航欄工作，但我遇到了子菜單問題。我已經想出瞭如何將子菜單相對於其父母ul定位，但是我無法使子菜單消失，直到用戶將鼠標懸停在父母身上。如何隱藏子菜單，直到它被鼠標懸停爲止
因此，當我將鼠標懸停在「危機與支持」上時，我希望不會看到次級子菜單，直到將鼠標懸停在「資源」選項卡上。任何人都可以幫助搞清楚我做錯了什麼？
這裏是一個live example
下面是HTML：
<!-- Navigation Bar -->
<div class="nav">
<!-- Quick Close -->
<button id="get-away">QUICK CLOSE</button>
<!-- Search Bar
<form action="./search.php" method="get">
<input type="text" name="input" size="40px"/>
<input type="submit" value="SEARCH"/>
</form> -->
<!-- Sticky Navigation -->
<div class="nav-wrapper">
<ul>
<li>
<a href="#">ABOUT US</a>
<ul>
<li><a href="story.html">OUR HER-STORY</a></li>
<li><a href="why.html">WHY A WOMEN'S CENTER?</a></li>
<li><a href="space.html">LEARN ABOUT OUR SPACE</a></li>
<li><a href="staff.html">MEET OUR STAFF</a>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
</li><li>
<a href="#">CRISIS & SUPPORT</a>
<ul>
<li><a href="find.html">FIND COMMUNITY</a></li>
<li><a href="rights.html">BASIC RIGHTS</a></li>
<li><a href="health.html">HEALTH</a></li>
<li><a href="/resources/index.html">RESOURCES FOR</a></li>
<ul class ="submenu">
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
</ul>
</li>
<li><a href="educators.html">FOR EDUCATORS</a></li>
</ul>
</li><li>
<a href="#">GET INVOLVED</a>
<ul>
<li><a href="#">VOLUNTEER</a></li>
<li><a href="#">JOIN PEER EDUCATION</a></li>
<li><a href="#">BECOME A SAGE AFFILIATE</a></li>
<li><a href="https://docs.google.com/a/ucdavis.edu/forms/d/1vr13pZ7HJbTwOKo3x_mCj3R0Hctt7Y7Bi-TgLun2oJA/viewform">GET WRRC UPDATES</a></li>
<li><a href="#">STUDENT STAFF POSITIONS</a></li>
</ul>
</li><li>
</li>
</ul>
</div>
</div>
這裏是CSS：
/* Navigation Bar */
/* Styles color and interaction, as well as continuous position on scroll. */
.nav {
position: relative;
color: white;
background: -webkit-linear-gradient(#182B52, #1D355E); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#182B52, #1D355E); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#182B52, #1D355E); /* For Firefox 3.6 to 15 */
background: linear-gradient(#182B52, #1D355E); /* Standard syntax (must be last) */
box-shadow: 0 0 10px 0px black;
position: -webkit-sticky;
z-index: 1;
}
.nav button {
padding: 10px;
background: #182B52;
color: white;
border-style: solid;
border-top-style: none;
border-color: white;
border-width: 1px;
margin-left: 47%;
margin-bottom: 15px;
}
.nav button:hover {
background: #D3B663;
}
.nav-wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
}
.nav ul li:hover{
background-color: #1D355E;
}
.nav ul li a,visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
.nav ul li a:hover {
color: white;
text-decoration: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul ul {
display: none;
position: absolute;
background-color: rgba(29, 53, 94, .75);
}
.nav ul ul li {
display: block;
text-align: left;
}
.nav ul ul li a,visited {
color: white;
}
.nav ul ul li a:hover {
color: #D3B663;
display: block;
}
.nav ul.submenu{
display: none;
position: absolute;
left:153px;
top:147px;
width: 150px;
text-align: center;
}
.nav ul.submenu li {
text-align: left;
color: white;
}
.nav li:hover ul.submenu:hover {
color: #D3B663;
display: block;
}
.nav-wrapper img {
float: right;
height: 75px;
padding-right: 70px;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
.nav form {
position: absolute;
right: 0;
padding-right: 75px;
margin-top: -18px;
}
.nav input {
border: solid;
border-color: white;
border-width: 1px;
color: white;
background-color: #182B52;
padding: 6px;
padding-top: 8px;
}
.nav input:hover {
background: #1D355E;
}
謝謝您的時間！