在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

你的子菜單必須是一個李

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