使溢出-y显示在 <ul> 边界内答案

【问题标题】：Make overflow-y show inside <ul> borders使溢出-y显示在 <ul> 边界内
【发布时间】：2015-10-16 17:51:23
【问题描述】：

标题说明了一切。有没有办法制作一个下拉导航栏，它将使用<ul>s，然后，在悬停主要<li>s 之一时，它会显示一个<ul>，它总是有滚动条（溢出-y )，里面说的是<ul>borders？

【问题讨论】：

你已经尝试过什么？

标签： html css drop-down-menu html-lists navbar

【解决方案1】：

你是对的。这确实可以通过结合max-height 和overflow-y: scroll 来实现，请参见添加的示例。

body {
  font: bold 1em sans-serif;
  color: white;
}
.menu {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu li {
  position: relative;
  float: left;
  background: tomato;
  padding: 1em;
}
.menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: purple;
  margin: 0;
  padding: 1em;
  max-height: 200px;
  overflow-y: scroll;
}
.menu li:hover ul {
  display: block;
}
.menu li ul li {
  display: block;
  white-space: nowrap;
  background: purple;
}

<ul class="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
    </ul>
  </li>
  <li>Item 4</li>
</ul>

【讨论】：