使用可滚动菜单下拉菜单。无法解决

时间:2016-02-10 17:39:42

标签: javascript html css drop-down-menu scroll

我正在尝试使用可滚动的子菜单制作下拉菜单? 我已经通过了https://css-tricks.com/long-dropdowns-solution/但是没有用。

我想知道是否有人可以提供帮助,我一直在尝试使用 最大高度和溢出但他们只是取消出现的太阳菜单。

有人能指出我正确的方向吗?我已经完成了所有可以找到的没有运气的教程。

在一个完美的世界中,一旦用户徘徊在提示和技巧,出现一个新菜单(就像它一样),能够在其中设置无限可滚动菜单,所以我不受限制。

任何帮助表示赞赏

#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 个答案:

答案 0 :(得分:1)

我猜你正在寻找这个:

#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>