自己写的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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>鼠标经过特效的横向导航</title>

<style>

body{ margin:0px;padding:0px;}

#menu{width:1160px;height:36px; margin:auto; margin-top:30px; overflow:hidden; background-color:#FFF;padding:inherit; }

#menu ul{ width:1100px; list-style:none; margin:0 0 0 40px; }

#menu ul li {float:left; margin:0 2px 0 0;}

#menu ul li a{width:98px; height:34px; line-height:34px; display:block; text-align:center; text-decoration:none;color:#000;border:1px solid #F00;}

#menu ul li a:hover{ background-color:#F00;width:100px; height:36px; line-height:34px; display:block; text-decoration: none;color:#FFF;  font-weight:bold;}

#menu .selcet a{width:98px; height:34px; line-height:34px; display:block; text-align:center; text-decoration:none;color:#FFF;background-color:#F00;border:1px solid #F00;  font-weight:bold;}

#menu .selcet  a:hover{ background-color:#FFF;width:98px; height:34px; line-height:34px; display:block; text-decoration: none;color:#F00;}

</style>

</head>


<body>

<div id="menu">

<ul>

<li class="selcet "> <a href="#">文字网址 </a></li>

<li> <a href="www.0518090.com">文字网址 </a></li>

<li> <a href="www.0518090.com">文字网址 </a></li>

<li> <a href="www.0518090.com">文字网址 </a></li>

<li> <a href="www.0518090.com">文字网址 </a></li>

<li> <a href="www.0518090.com">文字网址 </a></li>

<li> <a href="www.0518090.com">文字网址 </a></li>

<li> <a href="www.0518090.com">文字网址 </a></li>

<li> <a href="www.0518090.com">文字网址 </a></li><li> <a href="#">文字网址 </a></li>

</ul>


</div>

</body>

</html>