menu acordeon：div因为溢出而卡在我的列表中

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>

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

Answer 1

<ul id="submenus">内<div id="menus">，如果您不想要菜单中的子菜单，请制作另一个<div>，并将其放入：{/ p >

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

Answer 2

您可以更改CSS并在子菜单上使用absolute位置：

＆＃13;

＆＃13;

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

＆＃13;

#menus {
  position:relative;
  display:inline-block;
}
.main {
  overflow-y: scroll;
  margin:0;
  width: 150px;
  background-color: blue;
}
#submenus {
  position:absolute;
  left:100%;
  top:0;
  background-color: green;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul class="main">
      <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>

＆＃13;

＆＃13;

＆＃13;

_{奖金 - 快速多个子菜单}

＆＃13;

＆＃13;

$('span').click(function(){
  var col = $(this).data('color');
  $('.submenus').hide();
  $('span').css('background', '');
  $(this).css('background', col);
  $(this).next('.submenus').show().css('background', col);
})

＆＃13;

#menus {
  position:relative;
  display:inline-block;
}
.main {
  overflow-y: scroll;
  margin:0;
  width: 150px;
  background-color: blue;
}
.submenus {
  position:absolute;
  left:100%;
  top:0;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div id='menus'>
    <ul class="main">
      <li>
        <span data-color="red">Menu 1</span>
        <ul class='submenus'>
          <li>SubMenu 1
          </li>
          <li>
            SubMenu 2
          </li>
          <li>
            SubMenu 3
          </li>
        </ul>
      </li>
      <li>
        <span data-color="yellow">Menu 2</span>
        <ul class='submenus'>
          <li>SubMenu 21
          </li>
          <li>
            SubMenu 22
          </li>
          <li>
            SubMenu 23
          </li>
        </ul>
      </li>
      <li>
        <span data-color="green">Menu 3</span>
        <ul class='submenus'>
          <li>SubMenu 31
          </li>
          <li>
            SubMenu 32
          </li>
          <li>
            SubMenu 33
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;