javascript - 无法在溢出CSS中查看ls

Question

我面临着显示位于 div > ul 中带有溢出 css 的 ls 元素的问题。这是一个带有下拉列表的垂直列表。我在垂直列表上使用“溢出:滚动”。现在，如果代码中没有溢出，它就可以正常工作。但由于溢出，下拉菜单不会显示。

这是 jsfiddle。 https://jsfiddle.net/aryasobn/mpb6h831/

这是 css 和 html 代码。

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
            #map {
              height: 100%;
            }
            /* Optional: Makes the sample page fill the window. */
            html, body {
              height: 100%;
              margin: 0;
              padding: 0;
            }

            .dropdown-submenu{position:relative;}
            .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
            .dropdown-submenu:hover>.dropdown-menu{display:block;}
            .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
            .dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
            .dropdown-submenu{float:none;}
            .dropdown-submenu>.dropdown-menu{left:-100%;margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

            .sidebar{
                  position: absolute;
                  top: 0px;
                  right:0px;
                  text-align: center;
                  font-family: 'Roboto','sans-serif';
                  line-height: 30px;
                  padding-left: 10px;
                  z-index: 10;
                  float:right;
                  margin-right:20px;
                  height: 700px;
                  overflow: scroll;
            }

            .sidebar ul{
                z-index:25;
            }

            #mainist li{
                z-index:50;
            }
    </style>
    <div id="floating-panel" class="sidebar">
      <ul class="dropdown-menu" style="display: block; position: static;" id="mainlist">
          <li class="dropdown-submenu"><a href="#">Set1</a>
            <ul class="dropdown-menu" id="usa">
                    <li><a href="#">Reebok</a></li>
                    <li><a href="#">Nike</a></li>
            </ul>
          </li>
          <li class="dropdown-submenu"><a href="#">Set1</a>
            <ul class="dropdown-menu" id="canada">
                    <li><a href="#">Reebok</a></li>
                    <li><a href="#">Nike</a></li>
            </ul>
          </li>
      </ul>
    </div>

有人可以帮我解决这个问题吗？

这是当前的图像:

谢谢大家。

Answer 1

将溢出滚动应用于内部ul，而不是.sidebar。检查片段。如果您想要其他东西，请告诉我，我会修改它。

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu {
  float: none;
}

.dropdown-submenu>.dropdown-menu {
  left: -100%;
  margin-right: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

.sidebar {
  position: absolute;
  top: 0px;
  right: 0px;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
  z-index: 10;
  float: right;
  margin-right: 20px;
  height: 700px;
}

.sidebar ul {
  z-index: 25;
}

.abc {
  width: 150px;
  height: 150px;
  overflow: scroll;
}

#mainist li {
  z-index: 50;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

  <div id="floating-panel" class="sidebar">
    <ul class="dropdown-menu" style="display: block; position: static;" id="mainlist">
      <li class="dropdown-submenu"><a href="#">Set1</a>
        <ul class="dropdown-menu abc" id="usa">
          <li><a href="#">Reebok</a></li>
          <li><a href="#">Nike</a></li>
          <li><a href="#">Reebok</a></li>
          <li><a href="#">Nike</a></li>
          <li><a href="#">Reebok</a></li>
          <li><a href="#">Nike</a></li>
          <li><a href="#">Reebok</a></li>
          <li><a href="#">Nike</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu"><a href="#">Set1</a>
        <ul class="dropdown-menu abc" id="canada">
          <li><a href="#">Reebok</a></li>
          <li><a href="#">Nike</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>