为什么我的子菜单没有显示?

时间:2016-08-16 19:07:46

标签: html css submenu

我正在为网站的导航栏工作,但我特别在子菜单上遇到问题。我注意到只显示了一个子菜单,但其余的都是“隐藏”的。

例如,子菜单仅显示“Resources For”,而不显示在“Resources and Support”下的其他选项卡,例如“Basic Rights”,“Health”,“For Educators”。子菜单甚至不会出现在其他选项卡上,例如“程序”主标签下的“奖学金”。我似乎无法理解为什么子菜单没有出现。如果有人可以提供帮助,那将非常感激。

这是live example

这是HTML:

 public class CustomMultiSelectorCallback extends ModalMultiSelectorCallback {

        private int count;
        public CustomMultiSelectorCallback(MultiSelector multiSelector) {
            super(multiSelector);
        }

        @Override
        public boolean onCreateActionMode(ActionMode actionMode, Menu menu) {
            super.onCreateActionMode(actionMode, menu);
            count = 0;
            actionMode.getMenuInflater().inflate(R.menu.list_item_delete, menu);
            return true;
        }

这是CSS:

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

1 个答案:

答案 0 :(得分:0)

这是因为它们都是不正确的包装(只是以不同的方式)

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