纯CSS做菜单下拉框

最新推荐文章于 2023-06-18 18:10:45 发布

BeginnerXiao

最新推荐文章于 2023-06-18 18:10:45 发布

阅读量158

点赞数

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

本文链接：https://blog.csdn.net/qq_42215697/article/details/108334417

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		li{
			/*取消li的点*/
			list-style: none;
			height: 28px;
		}
		#menu{
			display: inline-block;
			width: 100%
		}
		.plat {
            max-height: 0;
            /*渐变效果*/
            transition: max-height 0.25s ease-out;
            overflow: hidden;
            background: #b6b1b1;
            border-radius: 4px;
            width: 80px;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        /*鼠标选中属性*/
        .nav:hover .plat {
            max-height: 200px;
            transition: max-height 0.25s ease-in;
            width: 80px;
            margin: 0;
            padding: 0;
        }
         /*鼠标选中属性*/
        li:hover {
        	border-radius: 4px;
           	background: #E33E33;
           	color: #fff;
        }
        .nav{
	          height: 32px;
	          width: 80px;
	          margin-top: 6px;
	          margin-right: 6px;
	          border-radius: 4px;
	          color: #fff;
	          padding-left: 0;
	          padding-right: 0;
	          line-height: 32px;
	          background: #E33E33;
	          text-align: center;
	          display: inline;
	          float: left;
        }
	</style>
</head>
<body>
	<div id="menu">
		<ul class="nav">
			更多信息
			<ul class="plat">
				<li onclick="alert('aaaa')">个人中心</li>
				<li>个人中心</li>
				<li>个人中心</li>
				<li>个人中心</li>
			</ul>
		</ul>
		<ul class="nav">
			更多信息
			<ul class="plat">
				<li onclick="alert('aaaa')">个人中心</li>
				<li>个人中心</li>
				<li>个人中心</li>
				<li>个人中心</li>
			</ul>
		</ul>
		<ul class="nav">
			更多信息
			<ul class="plat">
				<li onclick="alert('aaaa')">个人中心</li>
				<li>个人中心</li>
				<li>个人中心</li>
				<li>个人中心</li>
			</ul>
		</ul>
	</div>

</body>
</html>

参考纯css实现下拉菜单(超详细)——开源首席特技师

本文为编程小白自学问题归纳，如有错误与不足敬请指正！

BeginnerXiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS做菜单下拉框

效果：代码：<!DOCTYPE html><html><head> <title>test</title> <style type="text/css"> li{ /*取消li的点*/ list-style: none; height: 28px; } #menu{ display: inline-block; width: 100% } .plat {
复制链接

扫一扫