纯CSS实现导航栏菜单下拉效果

fengxue_snow

于 2019-07-31 12:45:27 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/fengxue_snow/article/details/97905121

本文通过实例代码介绍了如何仅使用CSS实现导航栏菜单的下拉效果，包括下拉菜单的显示与隐藏，以及样式设计，适合前端开发者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果图
在这里插入图片描述
2、代码

<style>
			/*common css begin*/
			*{margin:0px;padding:0px;}
			body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;}
			a { color: #666; text-decoration: none; cursor: pointer; }
			a, input { outline: none; }
			ul li{list-style: none;}
			.fl { float: left; }
			.fr { float: right; }
			.clearfix:after{content:"";display:block;clear: both;}
			/*common css end*/
			.main{position: absolute; left: 8px; top: 8px; bottom: 8px; right: 8px;}
			.nav{height: 36px;background: #12BCA6;position: absolute;left:0px;right:0px;top:0px;z-index: 9;}
			.nav ul li.nav_list{width:100px; text-align: center;}
			.nav ul li.nav_list a{width:100px;text-align:center;color:#fff;display:inline-block;line-height: 36px; }
			.nav ul li.nav_list:hover a{background: #10A491;}
			.nav ul li.nav_list a img{width:10px;margin-left:5