css制作简单的导航栏

标签：20px   css   ffffff   style   enter   bottom   splay   padding   导航栏   

//css代码

#menu{
height: 65px;
width:100%;
background-color: rgba(0, 0, 0, 0.5);
}
#menu ul{
list-style: none;
}
#menu ul li{
float: left;
position: relative;//如果这里不设置为这样的话，显示的下拉是水平的
}
#menu ul li a {//最头部的导航链接
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:white;
}
#menu ul li ul {
display: none;

}
#menu ul li:hover ul {
display: block;
position: absolute;
}
#menu ul li:hover ul li a {//第二列的导航链接
display:block;
background:#12aeef;
color:#ffffff;
width: 50px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#menu ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}

//HTML代码

<div id="menu">
<ul>
<li><a>标题一</a>
<ul>
<li><a href="">下拉一</a></li>
<li><a href="">下拉二</a></li>
<li><a href="">下拉三</a></li>
</ul>
</li>
<li><a>标题二</a>
<ul>
<li><a href="">下拉一</a></li>
<li><a href="">下拉二</a></li>
<li><a href="">下拉三</a></li>
</ul>
</li>
<li><a>标题三</a>
<ul>
<li><a href="">下拉一</a></li>
<li><a href="">下拉二</a></li>
<li><a href="">下拉三</a></li>
</ul>
</li>
<li><a>标题四</a>
<ul>
<li><a href="">下拉一</a></li>
<li><a href="">下拉二</a></li>
<li><a href="">下拉三</a></li>
</ul>
</li>
<li><a>标题五</a>
<ul>
<li><a href="">下拉一</a></li>
<li><a href="">下拉二</a></li>
<li><a href="">下拉三</a></li>
</ul>
</li>
</ul>
</div>

css制作简单的导航栏

标签：20px   css   ffffff   style   enter   bottom   splay   padding   导航栏   

原文地址：http://www.cnblogs.com/fireporsche/p/6183817.html