Javascript 带下拉菜单的JS菜单&；幻灯片主要项目

我想为响应HTML创建一个多级菜单

• 事件
  • 2012年活动
  • 2013年事件
    • 伦敦
    • 巴黎
    • 纽约
  • 2014年活动
    • 柏林
    • 莫斯科
    • 开普敦
  • 2015年活动
  • 2016年活动
  • 2017年活动

第二级菜单，即2012事件、2013事件如果项目太多，则应为滑动项目，即将有下一个/上一个箭头

当我将鼠标移到2014年事件上时，它应该会打开一个下拉菜单

如何实现此功能

---

提前谢谢。

试试这个响应菜单

<div id="left_container"></div>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>

    <ul class="nav NormalMenu">
        <li class="test">   <a href="#">HOME</a>

        </li>
        <li>    <a href="#">LOCATIONS</a>

            <ul >
                <li>    <a href="#">Boroughs</a>

                    <ul >
                        <li>    <a href="#">Enfield</a>

                            <ul>
                                <li><a href="#">E_Locations</a>
                                </li>
                                <li><a href="#">E_Unit Bases</a>
                                </li>
                                <li><a href="#">E_Parking</a>
                                </li>
                            </ul>
                        </li>
                        <li> <a href="#">Barnet</a>

                            <ul>
                                <li><a href="#">B-Locations</a>
                                </li>
                                <li><a href="#">B-Unit Bases</a>
                                </li>
                                <li><a href="#">B-Parking</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>    <a href="#">Maps</a>

                    <ul >
                        <li>    <a href="#">Enfield map</a>

                            <ul>
                                <li><a href="#">ME-Locations</a>
                                </li>
                                <li><a href="#">ME-Unit Bases</a>
                                </li>
                                <li><a href="#">ME-Parking</a>
                                </li>
                            </ul>
                        </li>
                        <li>    <a href="#">Barnet Map</a>

                            <ul>
                                <li><a href="#">MB-Locations</a>
                                </li>
                                <li><a href="#">MB-Unit Bases</a>
                                </li>
                                <li><a href="#">MB-Parking</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>    <a href="#">CONTACT</a>

        </li>
        <li>    <a href="#">LINKS</a>

        </li>
    </ul>
</div>
<div id="right_container">&nbsp;</div>

---

我终于找到了我想要的解决方案。给你

在本例中，我没有显示主项，即主项、事件、领导者等。在实际项目菜单中，这些项可用作导航项，当我将鼠标悬停在事件上时，它将打开我显示的下拉垂直菜单

希望我的例子对其他人有用

谢谢，

---

Rakshit Mania

使用引导多级菜单…感谢您的帮助。我已经有一个下拉菜单准备好了，这里的关键是有一个滑动点击上/下二级链接。

<section id="introduction">
    <div class="menu_wrapper">
      <div id="example" class="year_menu">
        <div class="slideshow parent" data-visible="4" data-pagination="false">
          <ul class="carousel">
            <li class="slide" id="2013_events"><a href="lead-meetings.html">2013 Events</a></li>
            <li class="slide active" id="2014_events"><a href="lead-meetings-2014.html">2014 Events</a></li>
            <li class="slide" id="2015_events"><a href="lead-meetings-2015.html">2015 Events</a></li>
            <li class="slide" id="2016_events"><a href="javascript:;">2016 Events</a></li>
            <li class="slide" id="2017_events"><a href="javascript:;">2017 Events</a></li>
            <li class="slide" id="2018_events"><a href="javascript:;">2018 Events</a></li>
            <li class="slide" id="2019_events"><a href="javascript:;">2019 Events</a></li>
            <li class="slide" id="2020_events"><a href="javascript:;">2020 Events</a></li>
          </ul>
        </div>
        <div class="slideshow child" data-visible="4" data-pagination="false">
          <ul class="carousel">
            <li class="slide" id="2013_events_child">
              <a href="speakers-info.html">Belfast</a>
              <a href="speakers-info.html">Dublin</a>
              <a href="speakers-info.html">Manchester</a>
              <a href="speakers-info.html">London</a>
              <a href="speakers-info.html">Berlin</a>
              <a href="speakers-info.html">Paris</a>
            </li>
            <li class="slide" id="2014_events_child">
              <a href="speakers-info.html">Prague</a>
              <a href="speakers-info.html">Madrid</a>
              <a href="speakers-info.html">Verona</a>
            </li>
            <li class="slide" id="2015_events_child">
              <a href="speakers-info.html">Lyon</a>
              <a href="speakers-info.html">Rotterdam</a>
              <a href="speakers-info.html">Toulouse</a>
              <a href="speakers-info.html">Cork</a>
              <a href="speakers-info.html">Paris</a>
            </li>
            <li class="slide" id="2016_events_child">&nbsp;</li>
            <li class="slide" id="2017_events_child">&nbsp;</li>
            <li class="slide" id="2018_events_child">&nbsp;</li>
            <li class="slide" id="2019_events_child">&nbsp;</li>
            <li class="slide" id="2020_events_child">&nbsp;</li>
          </ul>
        </div>
      </div>
    </div>
    </section>