Question

我正在尝试创建一个嵌套的下拉菜单，该菜单可能很长并且溢出页面。

我想要做的是，当菜单太长时，它会显示一个滚动条。我正在使用overflow: auto执行此操作。但是，当我这样做时，它会陷入同一个滚动空间内的任何子菜单。由第一个滚动条定义。

我还尝试使用overflow: none选择器进行:not(:hover)的各种迭代，但我尝试过的任何内容似乎都无效。

我希望它只是在必要时显示每个级别的滚动条（即子菜单会滚动页面）。每个子菜单都应该弹出＆＃39;超出上一个滚动条，如果有的话，好像它不在那里。

我想在所有CSS中执行此操作，但我也可以使用JS解决方案。

我有一个代码笔在这里显示问题： https://codepen.io/mcmurphy510/pen/ZyGLKd

Answer 1

我不确定我是否正确理解了您的问题，但尝试使用ID或CLASS隔离您想要的元素。请参阅第三级菜单。

＆＃13;

#primary_nav_wrap {
  margin-top: 15px
}

#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap ul li.current-menu-item {
  background: #ddd
}

#primary_nav_wrap ul li:hover {
  background: #f6f6f6
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover > ul {
  display: block;
  height: 200px;
}

#primary_nav_wrap ul li ul li:not(:hover) {
}

/* ul li ul li ul li {
  overflow: auto;
} */

#subdeep {
  overflow: auto;
  height: 50px !important;
}

＆＃13;

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul id="subdeep">
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
</ul>
</nav>

＆＃13;

Answer 2

可能你可以使用proposed solution因为元素相对于彼此定位，因此菜单可以设置一些分支，你只需“确保”父元素保持可见< / p>

Answer 3

鼠标悬停在项目＆＃34;链接3＆＃34;将在其右侧显示其子菜单，然后将鼠标悬停在＆＃34; Link 31＆＃34;进一步的子菜单。

＆＃13;

.menu {
  position: relative;
}

ul {
  width: 200px;
  margin: 0;
  color: black;
  list-style:none;
  padding:0;
  max-height:100px;
  overflow-x: hidden;
  overflow-y: auto;
}

li {
  padding:0.5em;
}
li:hover{
  background-color:blue;
  color:white;
}
li .menu {
  position: absolute;
  z-index: 10;
  background-color:lightgrey;
  opacity: 0;
  transition: opacity 0.5s;
}
li:hover > .menu,
.menu:hover {
  opacity: 1;
}

li.parent {
  cursor: pointer;
}

.level2 {
  top: 0px;
  left: 200px;
}

＆＃13;

<div class="menu">
  <ul>
    <li>Link1</li>
    <li class="parent">Link3...
      <div class="menu level2">
        <ul>
          <li class="parent">Link31...
            <div class="menu level2">
              <ul>
                <li>Link 311</li>
                <li>Link 312</li>
                <li>Link 313</li>
                <li>Link 314</li>
              </ul>
            </div>
          </li>
          <li>Link 32</li>
          <li>Link 33</li>
          <li>Link 34</li>
        </ul>
      </div>
    </li>
    <li>Link2</li>
    
    <li>Link1</li>
    <li>Link2</li>
    
  </ul>
</div>

＆＃13;

用于长（滚动）下拉菜单的CSS

3 个答案: