I'm working on the navigation bar for a website, but I'm having trouble with the submenu specifically. I noticed that only one submenu displays, but the rest are "hidden".
For example, the submenu only appears for "Resources For" and doesn't appear for the other tabs under "Resources and Support", such as "Basic Rights", "Health", "For Educators". The submenu won't even appear on other tabs such as "Scholarship" under one of the main tabs "Program". I can't seem to understand why the submenu is not appearing. If anyone can help that would be greatly appreciated.
Here is a live example:
Here is the HTML:
<!-- Sticky Navigation -->
<div class="nav-wrapper">
<ul>
<li>
<a href="#">ABOUT US</a>
<ul>
<li><a href="story.html">OUR HER-STORY</a></li>
<ul class ="submenu">
<li><a href="./resources/academic/academics.html">ACADEMICS</a></li>
<li><a href="./resources/health/health.html">HEALTH</a></li>
<li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING & CHILDCARE</a></li>
<li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
<li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL & DATING VIOLENCE</a></li>
<li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li>
</ul>
<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="#">RESORUCES & SUPPORT</a>
<ul>
<li><a href="./resources/index.html">RESOURCES FOR</a>
<ul class ="submenu">
<li><a href="./resources/academic/academics.html">ACADEMICS</a></li>
<li><a href="./resources/health/health.html">HEALTH</a></li>
<li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING & CHILDCARE</a></li>
<li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
<li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL & DATING VIOLENCE</a></li>
<li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li>
</ul>
<li><a href="rights.html">BASIC RIGHTS</a></li>
<ul class ="submenu">
<li><a href="./resources/academic/academics.html">ACADEMICS</a></li>
<li><a href="./resources/health/health.html">HEALTH</a></li>
<li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING & CHILDCARE</a></li>
<li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
<li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL & DATING VIOLENCE</a></li>
<li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li>
</ul>
<li><a href="health.html">HEALTH</a></li>
<ul class ="submenu">
<li><a href="./resources/academic/academics.html">ACADEMICS</a></li>
<li><a href="./resources/health/health.html">HEALTH</a></li>
<li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING & CHILDCARE</a></li>
<li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
<li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL & DATING VIOLENCE</a></li>
<li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li>
</ul>
<li><a href="educators.html">FOR EDUCATORS</a></li>
<ul class ="submenu">
<li><a href="./resources/academic/academics.html">ACADEMICS</a></li>
<li><a href="./resources/health/health.html">HEALTH</a></li>
<li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING & CHILDCARE</a></li>
<li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
<li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL & DATING VIOLENCE</a></li>
<li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li>
</ul>
</ul>
</li>
<li>
<a href="#">PROGRAMS</a>
<ul>
<li><a href="community.html">COMMUNITY EVENTS</a></li>
<li><a href="scholarships.html">SCHOLARSHIPS</a></li>
<ul class ="submenu">
<li><a href="./resources/academic/academics.html">ACADEMICS</a></li>
<li><a href="./resources/health/health.html">HEALTH</a></li>
<li><a href="./resources/parentingchildcare/parentingchildcare.html">PARENTING & CHILDCARE</a></li>
<li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
<li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL & DATING VIOLENCE</a></li>
<li><a href="./resources/support/support.html">HOW TO SUPPORT A FRIEND</a></li>
</ul>
<li><a href="http://wrrclibrary.ucdavis.edu/researcher#_">JOY FERGODA LIBRARY (ALEXANDRIA)</a></li>
</ul>
</li>
<li>
<a href="#">COLLABORATIONS</a>
<ul>
<li><a href="request.html">REQUEST A WORKSHOP</a></li>
<li><a href="cosponsor.html">CO-SPONSORSHIPS & COLLABORATIONS</a></li>
</ul>
</li>
<li>
</li>
</ul>
</div>
</div>
And here is the 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: 100%;
top: 0;
width: 180px;
}
.nav ul.submenu li {
text-align: center;
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;
}
It's because they are all improperly wrapped (just in different ways
<li><a href="./resources/index.html">RESOURCES FOR</a> <!-- no closing li like the others-->
<ul class ="submenu">
<li></li>
</ul>
<!-- which means that the submenu^^ is still inside it -->
<li><a href="rights.html">BASIC RIGHTS</a></li> <!-- closing li -->
<ul class ="submenu">
<li></li>
</ul>
<!-- this submenu^^ is not in the li, which means that none of the CSS applies since it is not 'li ul.submenu'. It is only 'ul.submenu' -->
To fix, wrap ul.submenu in the li tags.
<li><a href="rights.html">BASIC RIGHTS</a>
<ul class ="submenu">
<li></li>
</ul>
</li><!-- closing li down here-->