CODEWITHSUNDEEP
htmlcssdrop-down-menuhtml-listsnavbar
errorous
errorous

Reputation: 1071

Make overflow-y show inside <ul> borders

Title says it all. Is there a way to make a dropdown navigation bar, which will use <ul>s, and then, upon hovering one of the main <li>s, it would show an <ul> which always have scroll-bar(overflow-y), which is inside said <ul> borders?

Upvotes: 0

Views: 45

Answers (1)

Jason
Jason

Reputation: 5575

You're right. This is indeed possible by combining max-height and overflow-y: scroll, see the added example. 

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>

Upvotes: 1

Related Questions