下拉菜单效果的实现方法--纯css实现

下拉导航的效果，实现效果有很多种效果，在这里我们使用css不用javascript实现咱们的下拉菜单效果

html代码
<ul id="nav">
    <li><a href="guanyuwomen.html">传智播客</a>
          <ul>
                <li><a href="jiudianjieshao.html">java学院</a> </li>
                <li><a href="jiudiantese-fuwutese.html">.net学院</a></li>
                <li><a href="">php学院</a></li>
               <li><a href="jiudiantupian1.html">网页平面设计学院</a></li>
               <div class="clear"></div>
        </ul>
   </li>
</ul>

css代码
#nav {width:660px;height:33px;font-size:12px;list-style:none;z-index: 10;position:relative;margin:0 auto;background:#3F3;}
#left_pic {width:8px;height:33px;display:block;float:left;background:#999;}
#right_pic {width:8px;height:33px;display:block;float:right;background:#999;}
#nav li {width:60px;float:left;text-align:center;line-height:30px;margin-left:10px;}
#nav li ul {display:none;list-style:none;z-index:1000;}
#nav li:hover ul {display:block;background:#606;/*这里放你下拉的背景图片*/width:100px;height:auto;z-index:300;}
.clear {clear:both}
#nav li.over ul {display:block; background:#36F;width:100px;height:auto;}
a:link {color: #FFF;text-decoration: none;}
a:visited {text-decoration: none;color: #FFF;}
a:hover {text-decoration: underline;}
a:active {text-decoration: none;}

下拉效果.png (2.33 KB, 下载次数: 6)

4 天前 上传

点击文件名下载附件