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

一、实现方式

通常菜单会用

的形式实现：

如：

          

            

                ARTICLES
                

                    128X128
                    256X256
                    512X512
                
            
            
GALLERY
                

                    flower
                    pancake
                    buffer
                
            
            
AFFILIATES
            
ARTICLES
            
ABOUTS US
            
CONTACT
         

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

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