简单的CSS菜单特效

<style type="text/css">
    img
    {
     width:100%;
    }
#menu{
  font-weight:bold;
  height:1.8em;
  background-color:#336666;
  overflow:hidden;
 }
 #menu a{
  float:left;
  white-space:nowrap;
  border-right:1px #ebebeb solid;
  padding:3px 15px 4px 15px;
  color:#ebebeb;
  text-decoration:none;
 }
 #menu a:hover{
  background-color:#ebebeb;
  color:#336666;
  border-right:3px #999999 solid;
  border-bottom:3px #999999 solid;
  padding-left:13px;
  padding-bottom:1px;
 }
 #menu ul{
    margin:0;
    padding:0;
    list-style-type:none;
   }
</style>
<div class="top" >
    <img src="images/top.JPG" alt="" />
       <div id="menu">
          <ul>
          <li><a href="Default.aspx">首页</a></li>
          <li><a href="about.aspx">关于我们</a></li>
          <li><a href="devies.aspx">柚果设计</a></li>
          <li><a href="Products.aspx">产品</a></li>
          <li><a href="Devices.aspx">设备中心</a></li>
          <li><a href="News.aspx">新闻中心</a></li>
          <li><a href="BBS.aspx">留言板</a></li>
          </ul >
       </div>
</div>

 

效果如图：