一级导航栏编辑练习
1、ul li方法实现
<1> 代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style >
a{
color: #ffffff;
text-decoration: none;
}
a:hover{
color: #ffffff;
text-decoration: underline;
}
.top_nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1px 0 0 0;
list-style: none ;
border-bottom: 8px solid darkred ;
overflow: hidden ;
/*background-color: #33b5e5 ;*/
}
.top_nav li{
float: left ;
margin-right: 1px;
}
.top_nav li a{
position: relative ;
z-index: 0;
line-height: 20px;
text-decoration: none ;
background: #dddddd ;
color: #666666 ;
display: block ;
width: 80px;
text-align: center ;
}
.top_nav li a span{
position: absolute ;
visibility: hidden ;
}
.top_nav li a:hover span {
line-height: 20px;