Long dropdown menu - no
property how to make it scroll?

Question

I am creating a dropdown menu for my blog and found a really helpful code from CSS-Tricks long dropdown solutions. It makes the menu scroll up and down on hover really great.

I tried changing some HTML and CSS but I can't make it work. Does it require changing the markup and CSS? Is there a way I can implement the code on my menu that doesn't have <ul> and <li> properties? What changes should I make to make the code work? Please give me some instructions on how to do it - that code is really wonderful.

<div class="dropdown">
<button class="dropbtn">Navigation</button>
<div class="dropdown-content">
<a href="List 1">1</a>
<a href="List 2">2</a>
<a href="List 3">3</a>
</div>
</div>

https://stackoverflow.com/questions/19227496/scrollable-menu-with-bootstrap-menu-expanding-its-container-when-it-should-not check out this link may this helps you.. Possible duplicate — Shadab Siddiqui, Jul 21 '18 at 06:48
One more link is this https://stackoverflow.com/questions/37963302/how-can-i-make-my-drop-down-menu-scrollable — Shadab Siddiqui, Jul 21 '18 at 06:48
I confused how to change from
to
and adding
properties. I tied copying the one from codepen and it ddn;t work, it gave messy menu list. — Circus Boulevard, Jul 21 '18 at 06:55
Please add code of, what is working and after change when it is not working. — Shadab Siddiqui, Jul 21 '18 at 07:09
I tried interchanging the codes and no success. The one that works is only on the tutorials but I don't like to change the blog HTML and CSS. I need some instructions how to make it work. — Circus Boulevard, Jul 21 '18 at 07:16
I like to make it scroll on hover using the code from CSS-Tricks long drop down menu solutions. Here is the code I like to make it scrollable: https://codepen.io/circus-boulevard/pen/BPpmQN — Circus Boulevard, Jul 21 '18 at 07:47
It didn't work..How can I implement the code from this post without much change in my menu markup? https://css-tricks.com/long-dropdowns-solution/? — Circus Boulevard, Jul 21 '18 at 08:49

score 0 · Accepted Answer · answered Jul 21 '18 at 08:53

<div id="wrapper">
    <div class="dropdown">
 <div class="dropdown">
        <button class="dropbtn">Text</button>
          <div class="dropdown-content" style="width: 200px; height: 100px; overflow-y: scroll;"><a href=" ">Lists 1</a>
            <a href=" ">Lists 2</a>
            <a href=" ">Lists 3</a>
            <a href=" ">Lists 4</a>
            <a href=" ">Lists 5</a>
            <a href=" ">Lists 5</a>
            <a href=" ">Lists 7</a>
            <a href=" ">Lists 8</a>
            <a href=" ">Lists 9</a>
            <a href=" ">Lists 10</a>
            <a href=" ">Lists 11</a>
            <a href=" ">Lists 12</a>
            <a href=" ">Lists 13</a>
            <a href=" ">Lists 14</a>
          </div>
      </div>
</div>

I just checked this and this is working as per your requirement. Just adding style="overflow-y: scroll"; in you div container this I'll work

Big thanks for helping me. Is there a way to make it scroll on hover like the one on codepen https://codepen.io/larrygeams/pen/feoDc — Circus Boulevard, Jul 21 '18 at 08:56

Long dropdown menu - no property how to make it scroll?

1 Answers1

Long dropdown menu - no
property how to make it scroll?