(自学收获)纯css网页小部件--下拉菜单

本文介绍五种使用HTML和CSS实现下拉菜单的方法,包括通过display、overflow、opacity等属性的不同设置来达到菜单的隐藏与显示效果,并探讨了这些方法对页面布局的影响。

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

        虔诚地拜读了http://www.cnblogs.com/yewenxiang/p/6064117.html这位博主的内容,然后仿照他的写了这篇博客(ps:我是年龄老的未成年人,转载不算犯法)

        对于导航的下拉菜单他有五种实现方法,前三种没有一个下拉条缓慢出现的过程(好吧他只有一个有那种效果偷笑)。

       html的结构不同变(嵌套的两个无序列表),只需修改css的部分代码即可用不同方法来实现,但同时对下面的流内元素的影响不同。详情自己手动实验或者看↑那个人的博客(没打广告,看疗效)(pss:果然自己学的不扎实,村里人见了.nav li:hover  .subnav{}这种中间子元素带着伪类的让我感到新鲜而又赤鸡 很好用)

        补充:自己有试着加了一个三级的导航,原理和之前的一样。所以同样可以加加加加加到一百层导航如果你愿意,可以靠position来定位你三级导航的位置。(其他的如用margin也能实现,反正都是调整位置嘛 不过那个就是在流里

                                                                                     


二级导航效果图:


       第一种:思路:靠display:none和悬停时候的display:block,来实现下拉菜单的隐藏和出现(第一个主体列表一定要用float流出来,在流内的话显示下来菜单会把主体部分顶上去微笑不信自己试)

     总体 html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单3</title>
	<link rel="stylesheet" href="sublist-5.css">
</head>
<body>
	<ul class="nav">
		<li><a href="#">菜单一</a>
			<ul class="subnav">
				<li>内容一</li>
				<li>内容二</li>
				<li>内容三</li>
			</ul>
		</li>
		<li><a href="#">菜单二</a>
			<ul class="subnav">
				<li>内容一</li>
				<li>内容二</li>
				<li>内容三</li>
			</ul>
		</li>
		<li><a href="#">菜单三</a>
			<ul class="subnav">
				<li>内容一</li>
				<li>内容二</li>
				<li>内容三</li>
			</ul>
		</li>
		<li><a href="#">菜单四</a>
			<ul class="subnav">
				<li>内容一</li>
				<li>内容二</li>
				<li>内容三</li>
			</ul>
		</li>
	</ul>

</body>
</html>
css:

* {
	padding: 0;
	margin: 0;
}
ul {
	list-style: none;
}
.nav {
	position: relative;
	left: 40%;
	top: 40px;
	width: 40%;
	height: 50px;
}
.nav > li {
	float: left;
	width: 20%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #00d;
	background-color: #aaa;
}
.nav >li:first-child {
	border-radius: 10px 0 0 10px;
}
.nav >li:last-child {
	border-radius: 0 10px 10px 0;
}
.nav li a {
	display: block;
	width: 100%;
	height: 50px;
	cursor: pointer;
}
.subnav {
	display: none;
}

.nav li:hover .subnav {
	display: block;
}
.subnav li {
	background-color: #888;
	
	transition: all 0.4s ease-in-out ;
}
.subnav li:hover {
    color: #000;
    background-color: #ddd;
}
      第二种:靠overflow:hidden和overflow:visible对导航的li的显示范围限定来实现
.nav > li {
	float: left;
	width: 20%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #00d;
	background-color: #aaa;
	overflow: hidden;
}
.nav >li:first-child {
	border-radius: 10px 0 0 10px;
}
.nav >li:last-child {
	border-radius: 0 10px 10px 0;
}
.nav li a {
	display: block;
	width: 100%;
	height: 50px;
	cursor: pointer;
}
.nav > li:hover {
	overflow: visible;
}
        第三种:通过透明度属性opacity:值0 和值1来实现

.subnav {
	opacity: 0;
}
.nav li:hover  .subnav{
	opacity: 1;

        第四种:通过把下拉菜单的ul高度设为0(!一定要overflow:hidden来隐藏 因为还有li呢)这种会有缓慢下落的效果  美滋滋

 

.subnav {
	height: 0;
	overflow: hidden;

	transition: all .5s ease-in-out;
}
.nav li:hover .subnav {
	height: 150px;
}
.subnav li {
	height: 50px;
	background-color: #888;
	
	transition: all 0.4s ease-in-out ;
}
        第五种:通过绝对定位,把下拉列表“藏”起来  移到别的位置,那个作者用的是向左移,因为他只做了一个,所以效果还好,如果你都有下拉,在定位的时候,需要给每个都设置一个left的值( 微笑应该是这样 错了别怪我  因为我统一设的类 没细究)所以我把定位定到了头顶上  嘎嘎嘎

.subnav {
	position: absolute;
	top: -999px;
	width: 20%;

}
.nav li:hover  .subnav{
	top: 50px;
}
         啊嘞,是不是还有从侧面出现的下拉菜单,。。。。。又是充满遗憾的一篇博客。下回思考思考。每天练习一点,生活很滋润大兄弟。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值