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

一、实现方式

通常菜单会用<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绝对定位时就相对父菜单设置位置，会呈现下拉菜单与父菜单对齐效果。