水平滑动与垂直滑动菜单

水平滑动菜单

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>

原理与水平滑动标签一样

相关推荐
大虾写代码4 分钟前
nvm和nrm的详细安装配置,从卸载nodejs到安装NVM管理nodejs版本,以及安装nrm管理npm版本
前端·npm·node.js·nvm·nrm
星哥说事5 分钟前
下一代开源 RAG 引擎,让你的 AI 检索与推理能力直接起飞
前端
....4926 分钟前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
machinecat8 分钟前
Webpack模块联邦 - vue项目嵌套react项目部分功能实践
前端·webpack
今禾10 分钟前
深入浅出:ES6 Modules 与 CommonJS 的爱恨情仇
前端·javascript·面试
前端小白199510 分钟前
面试取经:Vue篇-Vue2响应式原理
前端·vue.js·面试
睡不着先生10 分钟前
CSS `:is()` & `:where()` 实战指南:简化选择器,提升可维护性
css
子兮曰10 分钟前
⭐告别any类型!TypeScript从零到精通的20个实战技巧,让你的代码质量提升300%
前端·javascript·typescript
前端AK君10 分钟前
如何开发一个SDK插件
前端
小满xmlc10 分钟前
WeaveFox AI 重新定义前端开发
前端