css横向导航菜单示例

发布时间:2021-01-08编辑:脚本学堂
分享一例css横向导航菜单的实现代码,用css实现一个简单的横向导航菜单,感兴趣的朋友参考下。

例子,css实现横向导航菜单效果。
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  />
<title>普通的横向导航-www.jb200.com</title>
<style type="text/css">
<!--
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
-->
</style>
</head>
<body>
横向导航菜单效果:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#//" _fcksavedurl="#//" id="current">网站首页</a></li>
<li><a href="#" _fcksavedurl="#">网页特效</a></li>
<li><a href="#" _fcksavedurl="#">广告代码</a></li>
<li><a href="#" _fcksavedurl="#">网页特效</a></li>
<li><a href="#" _fcksavedurl="#">广告代码</a></li>
</ul>
</div>
</body>
</html>