水平滑动与垂直滑动菜单

水平滑动菜单

<!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>

使用行内样式将列表水平展示，然后通过定义背景色和鼠标经过时的背景色实现滑动效果

垂直滑动菜单

<!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>