CSS样式（选择器+浮动效果)

编写代码实现如下图效果：

实现代码及注解如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>导航栏下拉菜单</title>
<style type="text/css">
.nav{
background: red; /*导航栏底色为红色*/
color: #fff; /*导航栏字体为白色*/
width: 400px; /*导航栏宽度为400像素*/
}
ul{
padding: 0; /*去除ul标签的内边距*/
list-style: none; /*去掉ul标签前的小圆点*/
}
p,ul{
margin: 0; /*去除外边距*/
}
.nav >ul::after{
content: "";
display: block;
clear: both;
} /* 伪元素清除浮动，浮动后的导航栏处于浮动状态，故清除浮动效果使其具有一定的高度*/
.nav li{
line-height: 30px;/*行高、行间距、垂直居中*/
}
.nav >ul >li{
float: left; /*左浮动，使一级导航从左到右排列成一行*/
width: 100px; /*宽度为100像素*/
text-align: center; /*字体居中显示*/
position: relative; /*相对定位，相对其父级元素来定位*/
}
.nav >ul >li:hover{
background: blue; /*鼠标悬停时底色为蓝色*/
color: #fff;/*鼠标悬停时字体为白色*/
}
.nav >ul >li >ul{
display: none; /*隐藏ul标签下的li标签下的ul内容*/
position: absolute;/*绝对定位，将二级导航与二级导航固定在一个块里*/
background: blue; /*底色为蓝色*/
color: #fff; /*字体为白色*/
width: 100%; /*宽度为上一级li标签的100%*/
}
.nav >ul >li:hover >ul{
display: block; /*块级元素*/
}

.one,.two{
height: 200px;/*设置盒子的宽为200像素*/
width: 200px;/*设置盒子的高为200像素*/
}
.one{
background: red;/*设置盒子1的底色为红色*/
float: left;/*设置盒子1左浮动*/
display: none;/*隐藏盒子1*/
}
.two{
background: blue;/*设置盒子2底色为蓝色*/
display: none;/*隐藏盒子2*/
}
.red:hover ~ .one{
display: block;/*鼠标悬停在按钮显示红色上显示盒子1的块级元素*/
}
.blue:hover ~ .two{
display: block;/*鼠标悬停在按钮显示蓝色上显示盒子2的块级元素*/
}

</style>
</head>
<body>

<div class="nav">

<ul>

<li>
<p>菜单二</p>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>

注：此处的 <br>换行， 空格使用目的是使页面显示效果更佳，不做其他用处。可省略。

CSS样式（选择器+浮动效果)

猜你喜欢