纯CSS样式二级菜单导航

最新推荐文章于 2023-07-18 01:12:41 发布

菜鸟财一生

最新推荐文章于 2023-07-18 01:12:41 发布

阅读量551

点赞数

分类专栏：程序文章标签： html css web

本文链接：https://blog.youkuaiyun.com/weixin_43878963/article/details/106825704

版权

程序专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何仅使用CSS来创建功能完善的二级菜单导航。通过HTML结构和CSS样式，实现了鼠标悬停时展开子菜单的效果，为网页提供交互性的导航体验。

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

纯CSS样式二级菜单导航；

HTML：

<div class="nav">
    <ul>
        <li class="mom"><a href="http://www.henenseo.com">网站首页</a></li>
        <li><a href="">关于我们</a></li>
        <li class="show_nav"><a href="">案例中心</a>
            <ul class="hide_nav">在这里插入代码片
                <li><a href="">网页设计</a></li>
                <li><a href="">App开发</a></li>
                <li><a href="">网站建设</a></li>
                <li><a href="">微信小程序</a></li>
            </ul>
        </li>
        <li><a href="">新闻中心</a></li>
        <li><a href="http://www.henenseo.com">新起点博客</a></li>
    </ul>
</div>

			.nav{
				width:100%;
				height: 50px;
				text-align: center;
				background:orange;
			}
			.nav ul{
				margin: 0px auto;
			}
			.nav ul li{
				width:100px;
				line-height: 50px;
				float: left;
			}
			.nav ul li a{
				width: 100px;
				color:#fff;
				display: block;
			}
			.nav ul li a:hover{
				background: #ffb908;
			}
			.mom a:nth-child(1){
				background: #FFFFFF;
				color: orange;
			}
			
			.show_nav:hover .hide_nav{
				display: block;
			}
			.nav .hide_nav {
				display: none;
				transition:all 0.5s;
				position: relative;
			}
			.nav .hide_nav a{
				width:100px;
				height: 50px;
				background: #000;
			}
			.nav .show_nav .hide_nav .three_nav{
				width: 100px;
				height: 50px;
				line-height: 50px;
				position: absolute;
				left: 100px;
				top:0;
				background-color: #FFB908;
				display: none;
			}
			
			.nav .hide_nav:hover .three_nav{
				display: block;
			}