html - 为什么我的子菜单没有显示？

Question

我正在为一个网站设计导航栏，但我在使用子菜单时遇到了问题。我注意到只有一个子菜单显示，但其余的都是“隐藏的”。

例如，子菜单只出现在“Resources For”上，而不会出现在“Resources and Support”下的其他选项卡上，例如“Basic Rights”、“Health”、“For Educators”。子菜单甚至不会出现在其他选项卡上，例如“计划”主选项卡之一下的“奖学金”。我似乎无法理解为什么没有出现子菜单。如果有人可以提供帮助，将不胜感激。

这是一个live example :

这是 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 &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="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 &amp; 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 &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="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 &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="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>

                <li>

                </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

都是因为包装不当(只是方式不同而已

<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' -->

要修复，请将 ul.submenu 包装在 li 标签中。

<li><a href="rights.html">BASIC RIGHTS</a>
  <ul class ="submenu">
      <li></li>
  </ul>
</li><!-- closing li down here-->