带有可滚动菜单的下拉菜单。 无法修复
[英]Drop Down Menu with scrollable Menu. Cant fix
问题描述
我正在尝试使用可滚动子菜单制作下拉菜单吗？ 我已经通过https://css-tricks.com/long-dropdowns-solution/了，但是不起作用。
我想知道是否有人可以提供帮助，我一直在尝试使用max-height和溢出，但是它们只是取消了出现的sun菜单。
谁能指出我正确的方向？ 我已经遍历了所有没有运气的教程。
在理想的世界中，一旦用户将鼠标悬停在提示和技巧上，就会出现一个新菜单（确实如此），并具有一个无限滚动菜单的功能，因此我不受限制。
任何帮助表示赞赏
#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 个解决方案
解决方案1
1 已采纳 2016-02-10 17:49:23
我想您正在寻找：
#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>
基于CSS / Javascript的下拉菜单。 onclick事件的问题
[英]CSS/Javascript based drop down menu. Issue with onclick event
下拉式菜单。 当您将鼠标悬停在子菜单上时，子菜单会下拉
[英]Drop down menu. Sub menu drops down when you hover where it will appear
jQuery下拉菜单。 单击后，子菜单消失。 那么，如何在单击时使子菜单停留？
[英]Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.