HTML+CSS项目实践二：单纯利用CSS制作导航栏下拉菜单效果（不使用JS）

知识点：CSS属性、盒子定位、伪类选择器的使用

实现效果：

制作思路：

1、先制作一个div盒子，用来放置导航菜单（一级菜单），设置盒子的高度和背景颜色。

2、一级菜单，使用ul无序列表制作，设置li标签浮动到一行，且取消项目符号。

3、需要设置二级菜单的li标签里，再嵌套ol标签制作。

4、二级菜单默认隐藏，只有鼠标悬浮在一级菜单上时，才会显示出对应的二级菜单。

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过时，显示二级菜单</title>
<style>
* { margin:0; padding:0;}  /* 通配符设置，取消间隙 */
body { width:100%; background:#FCF;}  /* 设置body样式，这里给出背景色是为了看的方便，实际制作式可以不设置背景颜色 */
/*使用伪类选择器，设置a标签在不同状态的样式，注意顺序*/
a:link { /*未单击访问时链接样式*/
		text-decoration:none; /*设置文本样式：无。用来取消默认的下划线*/
		color:#000;/*设置文本颜色：黑色*/
		} 
a:visited { /*单击访问后的超链接样式*/
		text-decoration:none; 
		color:#666; 
		}
a:hover {/*鼠标悬浮在链接上时，链接的样式*/
		text-decoration:none;
		color:#F00;
 		}
a:active { /*鼠标单击未释放的超链接样式*/
		text-decoration:none; 
		}
#nav {/*设置导航栏盒子的样式*/
	margin:10px 0px;/*设置盒子上下外边距10px，左右外边距0px*/
	background-color:#F9C;/*设置盒子背景颜色*/
	font-size:20px;
	height:40px;
	line-height:40px;/*设置盒子行高和盒子高度一样，可以实现盒子内容垂直居中*/
	}
#nav ul { /*设置导航文字列表的样式*/
	width:840px;/*设置固定宽度*/
	margin:0px auto;/*设置一级菜单在的ul左右居中*/
	height:40px; 
	}
#nav li {/*统一设置导航盒子里所有的li标签样式*/
	list-style-type:none;/*取消li标签的项目符号*/
	float:left;/*设置li标签浮动，实现多个li在同一行*/
	height:40px;
	}
#nav ul li{
	width:120px;/*ul宽度840，一共7个一级菜单，平均分配120px*/
	text-align:center;
	}
#nav ul li:hover {/*设置导航盒子里li标签在鼠标滑过时的样式，给一个背景颜色*/
	background-color:#FFF;
	}
#nav ul li ol li{/*设置导航盒子里的ul里的li里的ol列表样式（即二级菜单样式）*/
	visibility:hidden;/*设置二级菜单隐藏*/
	}
#nav ul li:hover ol li {/*设置鼠标悬浮在一级菜单上时，二级菜单ol里的li标签的样式*/
	visibility:visible;/*设置ol标签显示*/
	background-color:#F9C;/*设置背景颜色*/
	border-top:1px solid #FFF;	/*设置上边框*/
	}
#nav ul li ol li:hover a {/*设置鼠标悬浮在二级菜单上时，超链接样式*/
	display:inline-block;/*设置显示方式为：行内块，这样才可以设置宽度*/
	width:120px;
	background-color:#FFF;
	}
</style>

</head>

<body>
	<div id="nav"><!--导航栏盒子-->
    	<ul><!--用ul标签来制作导航文字列表-->
        	<li>
            	<a href="#">美丽新生</a>
            </li>
            <li>
            	<a href="#">白领护肤</a>
                	<ol><!--使用ol列表添加二级菜单-->
                    	<li><a href="#">天然护肤</a></li>
                        <li><a href="#">美肌滋润</a></li>
                    </ol>
            </li>
            <li>
            	<a href="#">学生护肤</a>
                    <ol>
                    	<li><a href="#">超值套餐</a></li>
                        <li><a href="#">网红单品</a></li>
                    </ol>
            </li>
            <li>
            	<a href="#">孕妇专区</a>
                    <ol>
						<li><a href="#">孕妈补水</a></li>
						<li><a href="#">孕纹系列</a></li>
						<li><a href="#">洗护套装</a></li>
                    </ol>
            </li>
			<li>
            	<a href="#">护肤贴士</a>
				<ol>
					<li><a href="#">白领必备</a></li>
					<li><a href="#">孕妈必备</a></li>
					<li><a href="#">学生必备</a></li>
				</ol>
			</li>
			<li><a href="#">关于新生</a>
				<ol>
					<li><a href="#">新生品牌</a></li>
					<li><a href="#">新生荣誉专利</a></li>
					<li><a href="#">新生客户</a></li>
				</ol>
			</li>
        
			<li>
        		<a href="#">联系新生</a>
        	</li>
    	</ul>
    </div>
</body>
</html>

=========================这里是结束分割线==============================

HTML+CSS项目实践二：单纯利用CSS制作导航栏下拉菜单效果（不使用JS）

猜你喜欢