我正在为我的博客创建一个下拉菜单,并从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>
答案 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";
即可,