我想制作一个带有可滚动子菜单的下拉菜单？ 我经历了https://css-tricks.com/long-dropdowns-solution/但这是行不通的。
我想知道是否有人可以提供帮助，我一直在尝试使用 max-height 和 overflow 但它们只是抵消了出现的太阳菜单。
谁能指出我正确的方向？我已经完成了我能找到的所有教程，但运气不佳。
在一个完美的世界中，一旦用户将鼠标悬停在提示和技巧上，就会出现一个新菜单(就像它所做的那样)，其中可以有一个无限滚动的菜单，所以我不受限制。
感谢任何帮助
#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>最佳答案
我猜你正在寻找这个:
#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>关于javascript - 带有可滚动菜单的下拉菜单。无法修复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35322190/