0

I made a navigation bar for my website with some dropdown at hover content. However, it seems that scrolling is disabled for them and I have tried many ways but failed to enable the scrollbar. Since the dropdown content is quite long I would like the scrollbar to only appear when the resolution or window size is small.

CSS(Not full, I didn't put most the parts regarding the styles):

ul.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-family: Arial;
  z-index: 5;
}

ul.nav li a:hover:(.active), .dropdown:hover .dropbtn {
  background-color: #760808;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #830303;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 50;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 50;
}
<ul class="nav">
  <li><a href="homepage.html">Homepage</a>
  </li>
  <li class="dropdown">
    <a class="active" href="javascript:void(0" class="dropbtn">a</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a><a href="#">Link 2</a>
      <a href="#">Link 3</a></div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0" class="dropbtn">be</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0" class="dropbtn">c</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="../d.html">d</a></li>
  <li><a href="../e.html">e</a></li>
</ul>
Xascoria
  • 11
  • 2

2 Answers2

0
.dropdown-content {
   max-height: 240px; /* or any other value you want */
   overflow-y: auto;
}

But do note your current href expressions are invalid. Should be

href="javascript:void(0)"

(you need to close the paranthesis). 

$('.dropdown').on('mouseenter', function(e){
  $('.dropdown-content', this).show();
}).on('mouseleave', function(e){
  $('.dropdown-content', this).hide();
})
ul.nav {
  display: flex;
}
ul.nav li {
  display: block;
}
ul.nav li a {
  display: block;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-family: Arial;
  z-index: 5;
}

ul.nav li a:hover:(.active), .dropdown:hover .dropbtn { 
  background-color: #760808;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #830303;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 50;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="homepage.html">Homepage</a>
  </li>
  <li class="dropdown">
    <a class="active" href="javascript:void(0)" class="dropbtn">a</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a><a href="#">Link 2</a>
      <a href="#">Link 3</a></div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">be</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">c</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li><a href="../d.html">d</a></li>
  <li><a href="../e.html">e</a></li>
</ul>

You might also be interested in reading why using javascript in href's is considered bad practice from this question and it's accepted answer.

Which is to say: returning void(0) works, but if you ever get tempted to use other javascript expressions in hrefs you'll probably forget the context is different, which will lead to subtle errors and unexpected behavior for your apps.

tao
  • 82,996
  • 16
  • 114
  • 150
0

There seems to be some errors in your css and inline javascript:

//JAVASCRIPT
href="javascript:void(0)"

//CSS
ul.nav li a.active:hover{}

I can't really recreate your issue based on the code you provided. However, for the problem that you are facing you will need to look into the overflow-y property in css. Particularly you would want to set that property to scroll Such as overflow-y:scroll for each element that you would like to add a vertical scrollbar too. Similarly if you would like a horizontal scroll bar then set overflow-x:scroll.

As far as window size is concerned you will need to use media queries for a css only solution. There is a lot of information on media queries and how they work and you will need to figure out what works for your application. This is an example of what it may look like:

@media screen and (min-width: 480px) {
    .dropdown-content {
        overflow-y: scroll;
        /* Optionally: "overflow-y: auto;" */
    }
}

NOTE:

If you are designing your website for view on small screens like touchscreen devices, there is no hover event for those devices, hover is in effect like on click or on focus. So please be mindful with using hover and designing for mobile devices.

LegenJerry
  • 420
  • 3
  • 7