html 上下滚动菜单
时间: 2023-10-09 12:15:22 浏览: 55
您可以使用HTML和CSS创建一个上下滚动菜单。以下是一个基本的示例:
HTML代码:
```
<div class="scroll-menu">
<ul>
<li><a href="#">菜单项 1</a></li>
<li><a href="#">菜单项 2</a></li>
<li><a href="#">菜单项 3</a></li>
<li><a href="#">菜单项 4</a></li>
<li><a href="#">菜单项 5</a></li>
<li><a href="#">菜单项 6</a></li>
<li><a href="#">菜单项 7</a></li>
<li><a href="#">菜单项 8</a></li>
<li><a href="#">菜单项 9</a></li>
<li><a href="#">菜单项 10</a></li>
</ul>
</div>
```
CSS代码:
```
.scroll-menu {
overflow-y: scroll;
height: 150px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}
li {
float: left;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #ddd;
}
```
这里的关键是将包含菜单项的元素的 `height` 属性设置为固定的高度,并将 `overflow-y` 属性设置为 `scroll`,从而创建一个垂直滚动条。然后,使用CSS将菜单项水平显示,并应用样式以使它们看起来像菜单。