I'm working on the navigation bar for a website, but I'm having trouble with the sub-submenu specifically. I noticed that the submenu is not properly aligning to it's parents on the right border. In fact all of them are being aligned to the top of the main navigation bar.
For example, the sub-submenu for "Basic Rights" and "Learn About Our Space" are all being shown at the top instead of properly aligning next to its parent. If anyone can explain why this is happening that would be great. Thank you so much!
Here is a live example:
Here is the 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>
<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>
<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>
</li>
<li><a href="rights.html">BASIC RIGHTS</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>
<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>
</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;
}
To fix this, add position: relative; to your .nav ul ul li.
.nav ul ul li {
display: block;
text-align: left;
position: relative; /* <-- Add this */
}