css 二级菜单样式

/* 菜单部分 */
.top_bar{ background-image:url(../images/top_bar.jpg); width:100%; text-align:center; }
.nav{width: 968px;height: 33px; margin:auto;}
.nav ul{list-style-type: none;margin: 0;padding: 0;line-height: 33px;}
.nav li{float: left;text-align: center;}
.nav li a{width: 138px;display: block;text-decoration: none;color: #fff;font-weight:bold;background:url(../images/spacing_bar.jpg) no-repeat;} 
.nav li:hover{background:url(../images/top_bar1.png) repeat-x;} 
.nav li a:hover{color: #ff7422;}
.nav ul ul{visibility: hidden;position: absolute;margin-left: 0;line-height: 28px; z-index:1000;}
.nav ul li:hover ul, .nav ul a:hover ul{visibility: visible;}
.nav ul ul{}
.nav ul ul li{clear: both;text-align:center;margin-left: 0;font-size: 12px;height: 30px;}
.nav ul ul li a{display: block;width: 138px;height: 28px;margin: 0;border: 0;background: #2d9dd9;border: 1px solid #005d8e; border-top-color:#5abff2;}
.nav ul ul li a:hover{color: #ff7422;background: #2d9dd9;}
/*头部样式 end*/

 

<div class="top_bar">
    <div class="nav">
        <ul>
            <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>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">合作伙伴</a></li>
                    <li><a href="#">BBS</a></li>
                </ul>
            </li>
            <li><a href="">新闻中心</a>
                <ul>
                    <li><a href="#">企业新闻</a></li>
                    <li><a href="#">行业新闻</a></li>
                </ul>
            </li>
            <li><a href="">产品与服务</a>
                <ul>
                    <li><a href="#">企业新闻</a></li>
                    <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>
                    <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>
                </ul>
            </li>
            <li><a href="">联系我们</a></li>
        </ul>
        <img src="images/spacing_bar.jpg" />
    </div>
</div>

posted @ 2013-03-28 18:28  顺手  阅读(234)  评论(0)    收藏  举报