html - 为什么子子菜单不与其父菜单的右侧对齐？

Question

我正在为一个网站设计导航栏，但我在使用子子菜单时遇到了问题。我注意到子菜单没有正确对齐右边框上的 parent 。事实上，所有这些都与主导航栏的顶部对齐。

例如，“基本权利”和“了解我们的空间”的子子菜单都显示在顶部，而不是与其父级旁边正确对齐。如果有人能解释为什么会这样，那就太好了。非常感谢!

这是一个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 &amp; CHILDCARE</a></li>
                                <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
                                <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; 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 &amp; 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 &amp; CHILDCARE</a></li>
                                <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
                                <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; 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 &amp; CHILDCARE</a></li>
                                <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
                                <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; 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 &amp; CHILDCARE</a></li>
                                <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
                                <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; 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 &amp; CHILDCARE</a></li>
                                <li><a href="./resources/pregnancy/pregnancy.html">PREGNANCY</a></li>
                                <li><a href="./resources/sexualdatingviolence/sexualdatingviolence.html">SEXUAL &amp; 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 &amp; 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;
    }

Answer 1

要解决此问题，请将 position: relative; 添加到您的 .nav ul ul li。

.nav ul ul li {
  display: block;
  text-align: left;
  position: relative; /* <-- Add this */
}

JSFiddle