帶有可滾動菜單的下拉菜單。 無法修復
[英]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.