水平滑动菜单
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
background-color: #000;
}
ul li{
text-shadow: none;
display: inline-block;
height: 40px;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 10px;
line-height: 40px;
text-align: center;
}
ul li:hover a{
background-color:#8F8A8A;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">New</a></li>
<li><a href="#">Book</a></li>
<li><a href="#">prices</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Tian</a></li>
<li><a href="#">Name</a></li>
</ul>
</body>
</html>使用行内样式将列表水平展示，然后通过定义背景色和鼠标经过时的背景色实现滑动效果
垂直滑动菜单
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
background-color: #000;
}
ul li{
text-shadow: none;
height: 40px;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 10px;
line-height: 40px;
width: 100%;
display: block;
}
ul li:hover a{
background-color:#8F8A8A;
}
</style>
</head>
<body>
<ul>
<li><a href="https://www.w3school.com.cn/css/css_navbar_horizontal.asp">Home</a></li>
<li><a href="#">New</a></li>
<li><a href="#">Book</a></li>
<li><a href="#">prices</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Tian</a></li>
<li><a href="#">Name</a></li>
</ul>
</body>
</html>原理与水平滑动标签一样