长下拉菜单-没有<li>属性如何使其滚动?

时间:2018-07-21 06:43:58

标签: jquery html css

我正在为我的博客创建一个下拉菜单,并从CSS-Tricks长下拉菜单解决方案中找到了一个非常有用的代码。它使菜单在悬停时上下滚动确实很棒。

我尝试更改一些HTML和CSS,但无法使其正常工作。是否需要更改标记和CSS?有没有办法我可以在菜单上实现没有<ul><li>属性的代码?我应该进行哪些更改才能使代码正常工作?请给我一些操作说明-该代码确实很棒。

<div class="dropdown">
<button class="dropbtn">Navigation</button>
<div class="dropdown-content">
<a href="List 1">1</a>
<a href="List 2">2</a>
<a href="List 3">3</a>
</div>
</div> 

1 个答案:

答案 0 :(得分:0)

<div id="wrapper">
    <div class="dropdown">
 <div class="dropdown">
        <button class="dropbtn">Text</button>
          <div class="dropdown-content" style="width: 200px; height: 100px; overflow-y: scroll;"><a href=" ">Lists 1</a>
            <a href=" ">Lists 2</a>
            <a href=" ">Lists 3</a>
            <a href=" ">Lists 4</a>
            <a href=" ">Lists 5</a>
            <a href=" ">Lists 5</a>
            <a href=" ">Lists 7</a>
            <a href=" ">Lists 8</a>
            <a href=" ">Lists 9</a>
            <a href=" ">Lists 10</a>
            <a href=" ">Lists 11</a>
            <a href=" ">Lists 12</a>
            <a href=" ">Lists 13</a>
            <a href=" ">Lists 14</a>
          </div>
      </div>
</div>

我刚刚检查了一下,这可以按照您的要求进行。 只需在您的div容器中添加style="overflow-y: scroll";即可,