CSS实现垂直和s水平下拉菜单

最新推荐文章于 2023-12-28 18:29:15 发布

Eveweiscsdn

最新推荐文章于 2023-12-28 18:29:15 发布

阅读量4.1k

点赞数 1

分类专栏： css3 html5 文章标签： css 下拉菜单

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/54313514

版权

css3 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

html5

28 篇文章 1 订阅

订阅专栏

<!DOCTYPE html />
<html>
<head>
    <title>垂直下拉菜单</title>
    <style type="text/css">
        *{margin:0;padding:0;}
		.ul1{
			text-decoration: none;
			list-style: none;
			float: left;
			margin: 30px 50px;
		}
		.ul1 li{
			width: 50px;
			position: relative;
			padding-bottom: 10px;
			border: 1px solid #adf;
			/* float: left; */  /* 加上这个float时就是水平下拉菜单 */
		}
		.ul1 li a{
			text-decoration: none;
			color: #8bf;
		}
		.ul1 li ul{
			display: none;
			background-color: lightyellow;
			color: #bfe;
			border: 1px solid #3ab;
			position: absolute;
			left: 0px;
			top: 100%;
			z-index: 10;
		}
		.ul1 li ul li{
			position: relative;
			list-style-type: none;
		}
		.ul1 li:hover ul{
			display: block;
		}
    </style>
</head>
<body>
    <div>
    	<nav>
    		<ul class="ul1">
    			<li><a href="#">下拉1</a>
					<ul>
						<li><a href="#">内容1</a></li>
						<li><a href="#">内容2</a></li>
						<li><a href="#">内容3</a></li>
					</ul>
    			</li>
    			<li><a href="#">下拉2</a>
					<ul>
						<li><a href="#">内容1</a></li>
						<li><a href="#">内容2</a></li>
						<li><a href="#">内容3</a></li>
					</ul>
    			</li>
    			<li><a href="#">下拉3</a>
						<ul>
						<li><a href="#">内容1</a></li>
						<li><a href="#">内容2</a></li>
						<li><a href="#">内容3</a></li>
					</ul>
    			</li>
    		</ul>
    	</nav>
    </div>
</body>
</html>

垂直下拉菜单：

水平下拉菜单：

Eveweiscsdn

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
CSS实现垂直和s水平下拉菜单

垂直下拉菜单 *{margin:0;padding:0;} .ul1{ text-decoration: none; list-style: none; float: left; margin: 30px 50px; } .ul1 li{ width: 50px; position: relative; padding
复制链接

扫一扫