您的位置：首页 > Web前端 > CSS

css3三级下拉导航

2015-10-29 17:30 459 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css导航</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin: 0;padding: 0;}
body {
font: 12px/16px 'Microsoft yahei,微软雅黑';
color: #fff;
box-sizing: border-box;
}
.container {
width: 800px;
margin: 0 auto;
}
ul li {
list-style-type: none;
text-align: center;

}
ul li:hover {
cursor: pointer;
}
nav {

background: #000;
}
nav  .ul-all {
width: 770px;
margin: 0 auto;
height:  45px;
}
nav  .ul-all::before,nav  .ul-all::after {   //清除浮动
content:"";
display: table;
clear: both;
height: 0;
zoom: 1;
}
nav .ul-all>li {
float: left;
width: 150px;
transition: background 1s;
line-height: 45px;
position: relative;
margin: 0 2px;
}
nav .ul-all>li:hover {
cursor: pointer;
background: #fff;
color: #000;
}
nav .ul-all>li ul {
position: absolute;
display: none;
width: 100%;
z-index: 9999;    //避免下面绝对定位的div挡住
}
nav .ul-all>li:hover ul { //当鼠标移动到第一行的li时，将其下面的ul设置为显示(即显示二级导航)
display: block;
}
nav .ul-all>li ul {
background: #000;

}
nav .ul-all>li ul>li {
color: #fff;

}
nav .ul-all>li ul>li:hover{
color: #000;
background: #fff;

}
nav .ul-all .ul-2 li {
position: relative;
}
nav .ul-all .ul-2 li>.ul-3 {
display: none;
position: absolute;
left: 150px;
top: 0;
background: #000;
color: black;
z-index: 9999; //避免下面绝对定位的div挡住

}
nav .ul-all .ul-2 li:hover .ul-3{ //当鼠标移动到第二行的li时，将其下面的ul设置为显示(即显示第三级导航)
display: block;
}
.ul-2 li,.ul-3 li {
border-bottom: 1px solid #000;
}
.ul-2 li,.ul-3 li:first-child{
border:0;
}
.content {
width:100%;
height: 500px;
border: 1px solid #ef6677;
border-top: none;
position: relative;
}
.tit {
height: 120px;
font-size: 60px;
line-height: 60px;
text-indent: 2em;
position: absolute;
text-shadow: 5px 5px 6px  #ef6677,4px 4px 3px  #556677,3px 3px 3px  #446677,2px 2px 3px  #336677,1px 1px 3px  #226677; //参数:x轴  y轴 模糊距离 颜色
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<nav class="navigator">
<ul class="ul-all">
<li>主页</li>
<li>日志
<ul class="ul-2">
<li>公开日志
<ul class="ul-3">
<li>好友分享</li>
<li>独自享受</li>
</ul>
</li>
<li>私密日志</li>
</ul>
</li>
<li>说说
<ul class="ul-2">
<li>心情</li>
<li>记录</li>
</ul>
</li>
<li>相册</li>
<li>其他</li>
</ul>
</nav>
<main class="content">
<div class="tit">努力到无能为力，拼搏到感动自己!</div>
</main>
</div>
</body>

</html>

本人新手，使用博客记录自己学习情况，其中有很多不足之处，希望大家批评指正，在此先谢过啦！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 三级导航
相关文章推荐
新的分享
章节导航