版权声明:王迪 https://blog.csdn.net/dnruanjian/article/details/85102211
知识点: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>
=========================这里是结束分割线==============================