您的位置：首页 > Web前端 > CSS

纯css打造绿色横向二级导航菜单代码

2012-04-03 18:09 621 查看
纯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=gb2312" />

<title>纯css打造绿色横向二级导航菜单代码--免费模板</title>

<link rel="stylesheet" href="http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/css/base.css" type="text/css" media="screen" />

<!--[if IE 6]>

<style>

body {behavior: url("http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/csshover3.htc");}

#menu li .drop {background:url("http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/images/arrow.gif") no-repeat right 14px;

</style>

<![endif]-->

</head>

<body>

<div id="menu">

<ul>

<li><a href="#"  class="nodrop">首　页</a></li>

    

<li><a href="#" class="drop">免费模板</a>    

        <div class="dropdown_1column">        

                <div class="col_1">                

                    <ul class="simple">

                        <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="#">网站优化</a></li>

                        <li><a href="#">网站制作</a></li>                      

                    </ul>                        

                </div>                

        </div>        

    </li>

<li><a href="#" class="drop">网站建设</a>    

        <div class="dropdown_1column">        

                <div class="col_1">                

                    <ul class="simple">

                        <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="#">网站优化</a></li>

                        <li><a href="#">网站制作</a></li>

                    </ul>                        

                </div>                

        </div>        

  </li>

   <li><a href="#" class="drop">网络营销</a>    

        <div class="dropdown_1column">        

                <div class="col_1">                

                    <ul class="simple">

                        <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="#">网站优化</a></li>

                        <li><a href="#">网站制作</a></li>

                    </ul>                        

                </div>                

        </div>        

  </li>

    <li><a href="#" class="drop">网络营销</a>    

        <div class="dropdown_1column">        

                <div class="col_1">                

                    <ul class="simple">

                       <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="#">网站优化</a></li>

                        <li><a href="#">网站制作</a></li>

                    </ul>                        

                </div>               

        </div>        

    </li>

    

　　　<li><a href="#"  class="nodrop">关于我们</a></li>

　　　<li><a href="#"  class="nodrop">联系我们</a></li>

    

</ul>

</div>

</body>
</html>

原文地址:http://cssdh.mianfeimoban.com/cssdaohangtiao/20120311138.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css class dropdown 电子商务 div stylesheet
相关文章推荐
新的分享
章节导航