html - 在 Skeleton Wordpress 主题上制作子导航显示

Question

尝试将子菜单项添加到导航中，但即使在导航中使用正确的 HTML，子菜单也不会显示。

它使用 Skeleton wordpress 主题，标题在需要时手动更新，但需要添加子菜单。

HTML:

<div id="navigation" >
    <div class="menu container">
    <ul class="row sixteen columns">
    <li class="page_item menu-home"><a href="/">Home</a></li>
    <li class="page_item page-item-56"><a href="/about">About</a></li>
<ul class="sub-menu">
    <li class="page_item page-item-10"><a href="/volunteer">Volunteer</a></li>
</ul>
    <li class="page_item page-item-4"><a href="schedule">Schedule</a></li>
    <li class="page_item page-item-3"><a href="shows">Shows</a></li>
    <li class="page_item page-item-4663"><a href="podcasts">Podcasts</a></li>
    <li class="page_item page-item-12"><a href="features">Features</a></li>
    <li class="page_item page-item-13"><a href="events">Events</a></li>
    <li class="page_item page-item-8"><a href="contacts">Contact</a></li>
    <li class=""><a href="/voices">Voices</a></li>

    </ul>
    </div>
    </div>

CSS:

/* @group Navigation Bar */

#navigation {
    width: 100%;
    background: #1B7A9D;
    background: rgba(3, 68, 91, 0.5);
    position: relative;
    border: none;
    -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow:    0px 2px 8px rgba(0, 0, 0, 0.2);
box-shadow:         0px 2px 8px rgba(0, 0, 0, 0.2);

        font-family: 'Coustard', 'Georgia', serif;
}


#navigation ul li {
    position: relative;
    border: none;
}

#navigation ul li a {
    background-image: none;
    padding: 15px 20px /* 21px */;
    text-decoration: none;
    display: block;
    font-weight: normal;
    color: #ffffff;
    border: none;
}

/* Navbar Hover Links */

#navigation ul li:hover a,
#navigation ul li a:hover {
    background: rgba(255, 255, 255, 0.2);
    position: relative;
}

#navigation ul li:hover li a {
    color: #595959;
    font-weight: normal;
}

/* Navbar Active Links */

#navigation ul li.active a {
    color: #333;
    background: #fff;
}


/* Nav Sublevel */

#navigation ul.sub-menu {
    background: -moz-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(270deg, #FCFCFC, #ECECEC) repeat scroll 0 0 transparent;
    border-color: #EAEAEA #F5F5F5 #F5F5F5 #F5F5F5;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#navigation ul.sub-menu li {
    border: none;
}

/* Nav Sublevel Links */

#navigation ul.sub-menu li a {
    background: #f0f0f0;
    padding: 5px 0px 5px 8px;
    height: 32px;
    line-height: 32px;
    border-radius: 0;
    min-width: 210px;
    border-bottom: none;
    position: static;
    behavior: none;
}

/* Nav Sublevel Hover */

#navigation ul.sub-menu li a:hover {
    background: #fff;
    border-bottom: none;
}


/* @end */

Answer 1

你的子菜单必须是 li 的子菜单

<ul>
  <li>ITEM</li>
  <li>ITEM
      <ul>
         <li>SUBITEM</li>
      </ul>
  </li>
</ul>

或使用您的代码

<div id="navigation" >
  <div class="menu container">
     <ul class="row sixteen columns">
       <li class="page_item menu-home"><a href="/">Home</a></li>
       <li class="page_item page-item-56"><a href="/about">About</a>
         <ul class="sub-menu">
           <li class="page_item page-item-10"><a href="/volunteer">Volunteer</a></li>
            </ul></li>
       <li class="page_item page-item-4"><a href="schedule">Schedule</a></li>
       <li class="page_item page-item-3"><a href="shows">Shows</a></li>
       <li class="page_item page-item-4663"><a href="podcasts">Podcasts</a></li>
       <li class="page_item page-item-12"><a href="features">Features</a></li>
       <li class="page_item page-item-13"><a href="events">Events</a></li>
       <li class="page_item page-item-8"><a href="contacts">Contact</a></li>
       <li class=""><a href="/voices">Voices</a></li>

    </ul>
  </div>
</div>