javascript - 菜单 acordeon : div stuck in my list because of the overflow

Question

我想创建一个侧面菜单，我的代码如下所示:

function opensubmenus() {
  $('#submenus').css("display", "block");
}

#menus {
  overflow-y: scroll;
  width: 150px;
  background-color: blue;
}
#submenus {
  background-color: green;
  display: none;
}
submenus ul {
  float: right;
  position: relative;
}
nav {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul>
      <li>
        <span onclick='opensubmenus()'>Menu 1</span>

        <ul id='submenus'>
          <li>SubMenu 1
          </li>
          <li>
            SubMenu 2
          </li>
          <li>
            SubMenu 3
          </li>
        </ul>



      </li>
      <li>
        Menu 2
      </li>
      <li>
        Menu 3
      </li>
    </ul>
  </div>
</nav>

但是当我显示子菜单时，他没有出现在框外...... 我想要一个这样的菜单:
我绝对需要“overflow-y”，因为我有很多菜单，而且我需要有一个滚动选项。你知道如何得到这个结果吗？

Answer 1

您有<ul id="submenus"> <div id="menus">内，如果您不希望菜单内有子菜单，请再制作一个 <div> ，并将其放入:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul>
      <li>
        <span onclick='opensubmenus()'>Menu 1</span>

      </li>
      <li>
        Menu 2
      </li>
      <li>
        Menu 3
      </li>
    </ul>
  </div>

  <div>
    <ul id='submenus'>
      <li>SubMenu 1
      </li>
      <li>
        SubMenu 2
      </li>
      <li>
        SubMenu 3
      </li>
    </ul>
  </div>
</nav>

然后，要将它们并排显示，请应用 float:left;至#menus :

#menus {
  overflow-y: scroll;
  width: 150px;
  background-color: blue;
  float: left;
}

#submenus {
  background-color: green;
  display: none;
}

submenus, ul {
  float: right;
  position: relative;
}

nav {
  overflow: hidden;
}