How to hide submenu until it is hovered over by mouse - html

Question

I am currently working on a navigation bar for a website, but I am having trouble with the submenu. I have figured out how to position the submenu relative to it's parent ul, but I am having trouble on making the submenu disappear until the user hovers over the parent.
So when I hover over the "Crisis and Support" I expect not to see the secondary submenu until I hover over the "Resources" tab. Can anyone help figure out what am I doing wrong?
Here is a [live example][1]
/* 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;
}
<!-- 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>
ABOUT US
<ul>
<li>OUR HER-STORY</li>
<li>WHY A WOMEN'S CENTER?</li>
<li>LEARN ABOUT OUR SPACE</li>
<li>MEET OUR STAFF
<li>CONTACT US</li>
</ul>
</li>
<li>
CRISIS & SUPPORT
<ul>
<li>FIND COMMUNITY</li>
<li>BASIC RIGHTS</li>
<li>HEALTH</li>
<li>RESOURCES FOR</li>
<ul class="submenu">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>FOR EDUCATORS</li>
</ul>
</li>
<li>
GET INVOLVED
<ul>
<li>VOLUNTEER</li>
<li>JOIN PEER EDUCATION</li>
<li>BECOME A SAGE AFFILIATE</li>
<li>GET WRRC UPDATES</li>
<li>STUDENT STAFF POSITIONS</li>
</ul>
</li>
<li>
</li>
</ul>
</div>
</div>
Thank you for your time!

Answer 1

On you stylesheet (line 72) change
.nav ul li:hover ul {
display: block;
}
to
.nav ul li:hover > ul {
display: block;
}
You also have a submenu improperly nested. The closing tag for "Resources For" should come after the submenu -- you probably know that.
Codepen: http://codepen.io/SteveClason/pen/oxRyxY