网页中导航栏实现子菜单下拉效果

来源：互联网发布：数据库安全管理规定编辑：程序博客网时间：2024/05/29 16:28

一、实现方式

通常菜单会用<li><a>的形式实现：

如：

          <ul>            <li class="dropdown">                <a href="#" title="Articles">ARTICLES</a>                <ul class="subnav">                    <a href="#">128X128</a>                    <a href="#">256X256</a>                    <a href="#">512X512</a>                </ul>            </li>            <li class="dropdown"><a href="#" title="Gallery">GALLERY</a>                <ul class="subnav">                    <a href="#">flower</a>                    <a href="#">pancake</a>                    <a href="#">buffer</a>                </ul>            </li>            <li class="dropdown"><a href="#" title="Affiliates">AFFILIATES</a></li>            <li class="dropdown"><a href="#" title="Articles">ARTICLES</a></li>            <li class="dropdown"><a href="#" title="Abous us">ABOUTS US</a></li>            <li class="dropdown"><a href="#" title="Contact">CONTACT</a></li>         </ul>

二、点击菜单时实现子菜单下拉效果

css实现：

#dropdown {list-style : none;float:left;//display : inline;  和上一句都可实现横向排列效果line-height : 34px;}

.dropdown{position: relative;}

ul ul {    display: none;}

.dropdown:hover ul {    position: absolute;    display: block;    margin-left: -1px;    top: 34px;    left: 1px;    z-index: 9;    padding : 9px 15px 10px 15px;}

要点：

1.li默认是 block，会独占一行，要设置float:left，才会一行显示

2.子菜单隐藏

3.当鼠标移入菜单时，显示子菜单

4.父菜单要使用position定位（非static），子菜单使用absolute绝对定位时就相对父菜单设置位置，会呈现下拉菜单与父菜单对齐效果。

0 0