我需要创建一个菜单，它有多个子菜单

Question

假设我有一堆报纸：“泰晤士报”、“独立报”、“电讯报”和英国广播公司。

在下拉菜单中，我有：“泰晤士报”、“独立报”、“电讯报”、"BBC“、"BBC世界新闻”和"BBC英国新闻“。

我想要发生的是，当我单击BBC时，BBC世界新闻和BBC英国新闻出现在一个子列表中。这个子列表的插入方式有点像页面http://www.stpaulsschool.org.uk左侧的菜单，例如，当我点击“日常生活”时，其他的选项就会出现。

现在我有一个<form>，然后是一个<select>，然后是<option>s：

<form> 
    <select onchange="showRSS2(this.value)"> 
         <option value="">Select an RSS feed</option> <option value="Times">The Times</option> 
        <option value="Independent">The Independent</option> 
        <option value="BBC">BBC</option> 
        <option value="BBC-World">BBC World News</option> 
        <option value="BBC-UK">BBC UK</option> 
    </select>
</form>

Answer 1

<ul>
    <li><a href="#">The Times</a></li>
    <li><a href="#">The Indepentent</a></li>
    <li><a href="#">The Telegraph</a></li>
    <li>
        <a href="#">BBC</a>
        <ul>
            <li><a href="#">BBC World news</a></li>
            <li><a href="#">BBC UK news</a></li>
        </ul>
    </li>
</ul>

这应该足够了。

Answer 2

问题是？您只需创建一个列表<ul></ul>，每个成员<li></li>包含两个div，如下所示：

<li>
   <div class="header">HEADER</div>
   <div class="submenu">
      <ul>
         <li>One</li>
         <li>Two</li>
         <li>Three</li>
      </ul>
   </div>
</li>

在.submenu上设置css display: none;。然后添加javascript，例如jQuery slideToggle，并设置样式。你就完了。