Drop Down Menu with scrollable Menu. Cant fix
Question
I'm trying to make a drop down menu with scrollable sub-menus? I've gone through https://css-tricks.com/long-dropdowns-solution/ but is doesn't work.
I'm wondering if anyone can help, i have been trying to use max-height and overflow but they just cancel out the sun menu appearing.
Can anyone point me in the right direction? I've gone through every tutorial i can find with no luck.
In a perfect world once the user hovers over tips & tricks, a new menu appears (as it does) with the ability to have an endless scrollable menu within so I'm not restricted.
Any help appreciated
#wrap { width: 150px; height: 50px; padding-bottom: 10px; margin: 0; /* Ensures there is no space between sides of the screen and the menu */ z-index: 1; /* Makes sure that your menu remains on top of other page elements */ position: fixed; background-color: #FAFAFA; } .navbar { margin-top:-2px; height: 0px; padding: 0; padding-bottom: 10px; margin: 0; position: fixed; /* Ensures that the menu doesn't affect other elements */ border-right: 1px solid #FAFAFA; z-index: 12; } .navbar li { padding-bottom: 10px; height: auto; width: 150px; /* Each menu item is 150px wide */ /*float: left; This lines up the menu items horizontally */ object-position: top; text-align: center; /* All text is placed in the center of the box */ list-style: none; /* Removes the default styling (bullets) for the list */ font: normal bold 12px/1.2em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #FAFAFA; } .navbar a { padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */ /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */ border-right: 1px solid #000; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */ text-decoration: none; /* Removes the default hyperlink styling. */ color: #FC4C02; /* Text color is black */ display: block; margin-top: 0px; } .navbar li:hover, a:hover { background-color: #E7E7E7; } .navbar li ul { list-style:none; display: none; /* Hides the drop-down menu */ margin: 0; /* Aligns drop-down box underneath the menu item */ padding: 0; /* Aligns drop-down box underneath the menu item */ margin-left:150px; float:left; margin-top: -48px; height:0px; } .navbar li:hover ul { display: block; /* Displays the drop-down box when the menu item is hovered over */ z-index: 12; padding-left: 0px; } .navbar li ul li { background-color: #E7E7E7; } .navbar li ul li a { margin-top: -2px; bottom: .5px solid #FC4C02; z-index: 1001; } .navbar li ul li a:hover { background-color: #FAFAFA; }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table> <tr> <td> <p style="margin-left:10px; font-size: 80%"><a href=""></a></p> </td> <td> <div id="wrap" style="margin-top:0px; margin-left:-5px;"> <ul class="navbar"> <li> <a href="#">Tips & Tricks</a> <ul> <li> <a href="">gg</a> </li> <li> <a href="">aa</a> </li> <li> <a href="">pp</a> </li> <li> <a href="">ll</a> </li> <li> <a href="">qqe</a> </li> </ul> </li> <li> <a href="#">News</a> <ul> <li> <a href="">news</a> </li> <li> <a href="">Market</a> </li> <li> <a href="">Example 3</a> </li> <li> <a href="">Example 4</a> </li> </ul> </li> </ul> </div> </td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
1 answers
solution1
1 ACCPTED 2016-02-10 17:49:23
I guess you are looking for this:
#wrap { width: 150px; height: 50px; padding-bottom: 10px; margin: 0; /* Ensures there is no space between sides of the screen and the menu */ z-index: 1; /* Makes sure that your menu remains on top of other page elements */ position: fixed; background-color: #FAFAFA; } .navbar { margin-top: -2px; height: 0px; padding: 0; padding-bottom: 10px; margin: 0; position: fixed; /* Ensures that the menu doesn't affect other elements */ border-right: 1px solid #FAFAFA; z-index: 12; } .navbar li { padding-bottom: 10px; height: auto; width: 150px; /* Each menu item is 150px wide */ /*float: left; This lines up the menu items horizontally */ object-position: top; text-align: center; /* All text is placed in the center of the box */ list-style: none; /* Removes the default styling (bullets) for the list */ font: normal bold 12px/1.2em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #FAFAFA; } .navbar a { padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */ /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */ border-right: 1px solid #000; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */ text-decoration: none; /* Removes the default hyperlink styling. */ color: #FC4C02; /* Text color is black */ display: block; margin-top: 0px; } .navbar li:hover, a:hover { background-color: #E7E7E7; } .navbar li ul { list-style: none; display: none; /* Hides the drop-down menu */ margin: 0; /* Aligns drop-down box underneath the menu item */ padding: 0; /* Aligns drop-down box underneath the menu item */ margin-left: 150px; float: left; margin-top: -48px; /* CHANGES ARE BELOW HERE */ overflow-y: auto; overflow-x: hidden; max-height: 150px; position: absolute; } .navbar li:hover ul { display: block; /* Displays the drop-down box when the menu item is hovered over */ z-index: 12; padding-left: 0px; } .navbar li ul li { background-color: #E7E7E7; } .navbar li ul li a { margin-top: -2px; bottom: .5px solid #FC4C02; z-index: 1001; } .navbar li ul li a:hover { background-color: #FAFAFA; }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table> <tr> <td> <p style="margin-left:10px; font-size: 80%"> <a href=""></a> </p> </td> <td> <div id="wrap" style="margin-top:0px; margin-left:-5px;"> <ul class="navbar"> <li> <a href="#">Tips & Tricks</a> <ul> <li> <a href="">gg</a> </li> <li> <a href="">aa</a> </li> <li> <a href="">pp</a> </li> <li> <a href="">ll</a> </li> <li> <a href="">qqe</a> </li> </ul> </li> <li> <a href="#">News</a> <ul> <li> <a href="">news</a> </li> <li> <a href="">Market</a> </li> <li> <a href="">Example 3</a> </li> <li> <a href="">Example 4</a> </li> </ul> </li> </ul> </div> </td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to prevent body scrolling when scroll on Drop down menu.?
CSS/Javascript based drop down menu. Issue with onclick event
Drop down menu. Sub menu drops down when you hover where it will appear
Making a drop-down menu scrollable
how to fix triple drop down menu?
Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?
side menu with drop down menu
Cant get drop down menu onn click of a button through javascript
drop down menu of bootstrap
Drop down menu effects
Related Tags