下拉菜单

最新推荐文章于 2022-08-09 05:08:46 发布

原克技术

最新推荐文章于 2022-08-09 05:08:46 发布

阅读量47

点赞数

分类专栏： css html 文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_44432032/article/details/108873054

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style>
			/*将所有元素的默认间距清除，方便自己设置，并且可以消除ul和li的圆点*/
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				font: 300 14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
				background-color: #999999;
			}

			ul {
				background: #fff;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
				/*x坐标，y坐标，模糊程度，颜色*/
				white-space: nowrap;
				/*避免文字换行*/
			}

			ul li {
				position: relative;
			}

			ul li a {
				text-decoration: none;
				color: #777;
				padding: 10px 20px;
				display: block;
				background: url(detail.png) bottom right no-repeat;
			}

			ul li a:only-child {
				background: none;
			}

			ul li:hover {
				background: #777;
			}

			ul li:hover>a {
				color: #fff;
			}

			ul li:hover>ul {
				display: block;
				/* 鼠标进入母选单後，显示子选单 */
			}

			nav>ul>li {
				display: inline-block;
				/* 使一级选单排成一列 */
			}

			ul ul {
				position: absolute;
				top: 100%;
				list-style: none;
				background: #fff;
				box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
				display: none;
			}

			ul ul ul {
				position: absolute;
				left: 100%;
				top: 0;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li>
					<a>菜单</a>
					<ul>
						<li>
							<a>菜单1</a>
							<ul>
								<li>
									<a>菜单1-1</a>
									<ul>
										<li>
											<a>菜单1-2</a>
											<ul>
												<li><a>菜单1-3</a>
													<ul>
														<li><a>菜单1-4</a></li>
													</ul>
												</li>
											</ul>
										</li>
									</ul>
								</li>



							</ul>
						</li>
						<li><a>菜单2</a></li>
						<li><a>菜单3</a></li>
					</ul>
				</li>
				<li><a>水果</a>
					<ul>
						<li><a>香蕉</a></li>
						<li><a>苹果</a></li>
						<li><a>桃子</a></li>
					</ul>
				</li>
				<li><a>服装</a>
					<ul>
						<li><a>儿童</a></li>
						<li><a>男</a></li>
						<li><a>女</a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</body>
</html>

原克技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
下拉菜单

<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title
复制链接

扫一扫