导航栏看似平凡但却 是一个网站的精髓，根本所在，下面是使用几个css选择器简单的实现了导航栏，
块元素使用浮动效果实现并列一行，指针停留监听通过隐藏块标签，完成效果，具体实现如下代码
代码记录
元素：<div><ul><li>,
盒子属性：margin,padding
注：待完善
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style:none;/*ul: 取消序标 */
}
a {
text-decoration: none;/* a:取消下划线 */
}
.other{
width: 700px;
height: 50px;
line-height: 50px;
margin: 0px auto;/* 控制div与页边距 */
position: relative;/* 相对定位 */
}
.other ul {
height: 100px;
}
.other ul li {
float: left;
border-right: 1px solid #aaff7f;
background-color: #ffaaff;
}
.other ul li:last-child {
border-right: none;
}
.other ul li a{
display: block;/* a标签显示 */
width: 100px;/* 设置字体大小 */
text-align: center;/* a标签字体居中 */
color: #ffffff;/*1a标签字体设置颜色 */
}
.other ul li div {
display: none;/* 隐藏div标签 */
position: absolute;/* 绝对定位 */
left: 0;
top: 50px;
background-color: #aaffff;
width: 72%;
}
.other ul li:hover{
background-color: purple;
}
.other ul li:hover div{
display: block;
}
</style>
</head>
<body>
<div class="other">
<ul>
<li>
<a href="#">Java</a>
<div>Java是一门优秀的语言</div>
</li>
<li>
<a href="#">C语言</a>
<div>C语言是一门优秀的语言</div>
</li>
<li>
<a href="#">Python</a>
<div>Python是一门优秀的语言</div>
</li>
<li>
<a href="#">PHP</a>
<div>PHP是一门优秀的语言</div>
</li>
<li>
<a href="#">Android</a>
<div>Android是一门优秀的语言</div>
</li>
</ul>
</div>
</body>
</html>
