不错的纯CSS垂直导航菜单(推荐)

时间：2013-07-04 编辑：简简单单来源：一聚教程网

提示：您可以先修改部分代码再运行

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS垂直导航菜单</title>
<style>
#menu1 {

float:left;
}

#menu1 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}

#menu1 li
{
display: inline;
}

#menu1 a
{
color: #fff;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;

background-color: #686C7A;
border-bottom: 1px solid #eee;
}

#menu1 a:link, #menu a:visited
{
color: #EEE;
text-decoration: none;
}

#menu1 a:hover
{
background-color: #00BEE4;
color: #fff;
}

#menu1 li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #00BEE4;
}
#menu2 {

float:left;
}

#menu2 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#menu2 li
{
display: inline;
/* for IE5 and IE6 */
}

#menu2 a
{
color: #483000;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;

background-color: #F0F0D8;
border-bottom: 1px solid #fff;
}

#menu2 a:link, #menu a:visited
{
color: #483000;
text-decoration: none;
}

#menu2 a:hover
{
background-color: #487890 ;
color: #fff;
}

#menu2 li a#current
{
border-bottom: 3px solid #C0C018;
background: #487890 ;
color: #fff;
}
#menu3 {

float:left;
}

#menu3 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type: circle;
list-style-position:inside;
margin:0;
padding:0;
}
#menu3 li
{
display: inline;
/* for IE5 and IE6 */
}

#menu3 a
{
color: #483000;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;

background-color: #fff;
border-bottom: 1px solid #fff;
}

#menu3 a:link, #menu3 a:visited
{
color: #483000;
text-decoration: none;
}

#menu3 a:hover
{
border-left: 3px solid #901818;
color: #000;
}

#menu3 li a#current
{
border-left: 3px solid #901818;
background: #F0F0F0;
color: #000;
}
/* Menu 3 ends here */

/* Menu 4 starts here */
#menu4 {

float:left;
}

#menu4 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#menu4 li
{
display: inline;
/* for IE5 and IE6 */
margin:0px 0px 2px 0px;
}

#menu4 a
{
color: #000;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;

background-color: #FDFCF3;
border: 1px dotted #B5E3C7;
margin:0px 0px 2px 0px;
}

#menu4 a:link, #menu4 a:visited
{
color: #000;
text-decoration: none;
}

#menu4 a:hover
{
background-color: #B5E3C7 ;
color: #FDFCF3;
}

#menu4 li a#current
{
border: 1px solid #B5E3C7;
background: #B5E3C7 ;
color: #FDFCF3;
}
/* Menu 4 ends here */
</style>
</head>
<body>
<div id="menu1">
<ul>
<li><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

<div id="menu2">
<ul>
<li><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div style="clear:both;"><br /><br /></div>
<div id="menu3">
<ul>
<li><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

<div id="menu4">
<ul>
<li><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个：超炫CSS样式三级下拉菜单代
下一个：简洁jQuery滑动门效果特效代码

推荐专题

最新下载

热门教程

不错的纯CSS垂直导航菜单(推荐)

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程