漂亮的红色CSS网站菜单横向向下展开

时间：2013-09-13 11:51 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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=gb2312" />
<title>红色vista风格横向导航菜单</title>
<style>
body{margin:0px 0px 0px 0px;/*top,right,bottom,left*/font-size:12px;line-height:20px;font-family:Arial;}
form{margin:0px;padding:0px;}
ul{margin:0px;padding:0px;list-style:none;}
a,a:link,a:visited{color:#fff; text-decoration:none;}
a:hover{color:#fff; text-decoration:underline;}
a:active{color:#fff; text-decoration:none;}
.f_left{float:left;}
.f_right{float:right;}
.w100{width:100%; padding:0px; margin:0px; overflow:hidden;}
.top{width:950px;padding:0px;margin:0px auto;overflow:hidden;}
.top_logo{/*Head Logo*/width:385px;padding:0px;margin:0px;overflow:hidden;}
.top_column{/*Navigation*/width:930px;padding:8px 10px;margin:0px;overflow:hidden;}
.top_column li{text-align:center;display:block;font-size:12px; line-height:19px; font-family:Arial;}
body{background:url(http://www.codefans.net/jscss/demoimg/201309/main_bj.jpg) top center repeat-x #000000;color:#999;}
.box{width:950px;overflow:hidden;margin:0px auto;padding:0px 0px 20px 0px;}
.center_d{width:950px;overflow:hidden;padding:0px;margin:0px auto;margin-bottom:10px;}
.t_r{width:300px;overflow:hidden;padding:14px 25px 20px 0px;margin:0px;color:#fff;}
.t_r1{width:300px;overflow:hidden;padding:0px 0px 6px 0px;margin:0px;text-align:left;}
.t_r1 span a, .t_r1 span a:link, .t_r1 span a:visited{color:#F5DF8C; text-decoration:none; font-size:13px;}
.t_r1 span a:hover{color:#F5DF8C; text-decoration:underline;}
.t_r1 span a:active{color:#fff; text-decoration:none;}
.t_r2{width:300px;overflow:hidden;padding:0px;margin:0px;text-align:left;}
.top_column{background:url(http://www.codefans.net/jscss/demoimg/201309/dh.jpg) left top no-repeat;color:#fff;}
#nav{list-style-type: none; padding:0px; margin:0px;}
#nav a{display: block;text-align:center; font-size:12px;}
#nav a:link{color:#FFF; text-decoration:none;}
#nav a:visited{color:#FFF;text-decoration:none;}
#nav a:hover{color:#FFF;text-decoration:none;}
#nav li{float: left;line-height:19px; background:url(http://www.codefans.net/jscss/demoimg/201309/x.jpg) center right no-repeat;padding:0px 20px 0px 20px; margin:0px;}
#nav li ul{background:#C40002;list-style-type: none;text-align:left;left:-999em;position:absolute;padding:1px;margin:0px;width:150px;}
#nav li ul li{padding:0px;margin:0px;background:none;}
#nav li ul a{display:block;text-align:left;padding-left:2px; border-bottom:#7C0000 1px dashed;line-height:25px;width:140px;padding-left:10px;}
#nav li ul a:link{color:#FFF; text-decoration:none;width:140px;padding-left:10px;}
#nav li ul a:visited{color:#FFF;text-decoration:none;width:140px;padding-left:10px;}
#nav li ul a:hover{color:#FFB401;text-decoration:none;width:140px; background-color:#BF3332;padding-left:10px;}
#nav li:hover ul{left: auto;}
#nav li.sfhover ul{left: auto;}
</style>
</head>
<body>
<div class="box">
<div class="top">
<div class="top_column" style="margin-top:80px;">
<script type=text/javascript>
        </script>
        	<ul id=nav>
            	<li><a href="/">首页</a></li>
                <li><a href="/">关于我们</a>
                    <ul>
	<li><a href="/">公司简介</a></li>
	<li><a href="/">公司动态</a></li>
	<li><a href="/">公司新闻</a>                    
	<li><a href="/">企业文化</a></li>
                   </ul>
                </li>
                <li><a href="/">产品展示</a>
                    <ul>                	
                    	<li><a href="/">热销产品</a></li>                    
                    	<li><a href="/">新品上市</a></li>                    
                    	<li><a href="/">推荐产品</a></li>                    
                    	<li><a href="/">促销产品</a></li>  
                    </ul>
                </li>
                <li><a href="/">行业资讯</a> </li>
                <li><a href="/">客服中心</a>
                     <ul>
                        <li><a href="/">物流配送</a></li>
                        <li><a href="/">工程安装</a></li>
                     </ul>
                </li>
                <li><a href="/">工程案例</a></li>
                <li><a href="/">导航条代码</a></li>
                <li><a href="/" rel="nofollow">在线下单</a></li>
                <li ><a href="/">联系我们</a></li>
                <li style=" background:none;"><a href="/">零度对策</a></li>
          </ul>
      </div>
    </div>
</div>
</body>
</html>

漂亮的红色CSS网站菜单横向向下展开

网页特效