导航条练习。
大灰狼
2019-07-07 20:03:21
196
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用的导航菜单</title>
<style type="text/css">
* {/*初始化标签 默认的内外边距 设置字体颜色*/
padding: 0;
margin: 0;
color: #666666;
}
a{text-decoration: none;color: #ffffff;}/*设置所有a标签颜色*/
.headr{width: 1200px; margin: 0 auto;}/*设置总宽度1200 并左右居中*/
.logo{float: left; color: royalblue; font-size: 33px;}/*logo做浮动*/
.nav{float: right;}/*导航右浮动*/
ul li {/*让所有的li左浮动 变成一行 设置内外边距*/
list-style: none;
float: left;
background: #9AA4FF;
margin: 5px;
padding: 10px;
border-radius: 5px;
color: #ffffff;
}
/*群组选择器 让鼠标经过li 和 a变色*/
ul li:hover,
ul li:hover a{color: #004C96;}
ul li ul {/*默认隐藏二级菜单*/
display: none;
}
ul li:hover ul {/*鼠标经过一级菜单显示对应二级菜单*/
display: block;
}
ul li ul li {/*重置二级菜单浮动 内边距0*/
float: none;
display: block;
padding: 0;
}
</style>
</head>
<body>
<div class="headr">
<div class="logo">logo</div>
<div class="nav">
<ul>
<li><a href="/">首页</a></li>
<li>一级菜单1
<ul>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
</ul>
</li>
<li>一级菜单2
<ul>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
</ul>
</li>
<li>一级菜单3
<ul>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
</ul>
</li>
<li>一级菜单4
<ul>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
</ul>
</li>
<li>一级菜单5
<ul>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
