css做横向菜单 |css 数字滚动效果

首先，大家需要有一个HTML结构来容纳大家的菜单。下面是一个简单的例子：

<ul class="menu">
<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>
</ul>

这里大家使用了一个无序列表来表示菜单，每一个菜单项都是一个列表项。现在，大家需要使用CSS来将这些菜单项按横向排列。

下面是大家要使用的CSS代码：

.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
margin: 0;
padding: 0;
}
.menu a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #fff;
background-color: #0086b3;
}
.menu a:hover {
background-color: #005580;
}

大家首先将无序列表样式设置为无，然后将列表项样式设置为行内块，并清除所有的外边距和内边距。接下来，大家将链接的样式设置为块级元素，以便让它们占据整个列表项的宽度。大家还为链接设置了一些内边距，文本修饰和背景颜色。当链接被悬停在上面时，大家将背景颜色更改为另一种颜色。

现在，大家的横向菜单就完成了！快来试试吧。