我在网站的导航栏上工作，但我特别在子菜单上遇到问题。我注意到子菜单没有正确地与右边界上的父母对齐。事实上，所有这些都与主导航栏的顶部对齐。
例如，＆＃34;基本权利＆＃34;的子子菜单。和＃34;了解我们的空间＆＃34;都显示在顶部，而不是在其父级旁边正确对齐。如果有人能解释为什么会发生这种情况会很棒。非常感谢你！
这是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>
<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>
这是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;
}