html基礎——下拉式菜單

一個網站能否讓用戶容易使用該網站往往是由菜單欄體現出來，因為它為網頁的大多數頁面提供功能入口。一個輕輕的點擊以后，即可顯示出菜單項，將網站的大部分頁面和功能顯示出來讓用戶清楚了解從而用戶節約一定的時間。接下來我教大家寫單擊菜單欄中的菜單命令將會出現一個下拉菜單。

1.HTML頁面

<div id="nav">
        <ul>
            <li><a href="">菜單一</a>
                <ul>
                    <li><a href="">子菜單1</a></li>
                    <li><a href="">子菜單2</a></li>
                    <li><a href="">子菜單3</a></li>
                </ul>
            </li>
            <li><a href="">菜單二</a>
                <ul>
                    <li><a href="">子菜單1</a></li>
                    <li><a href="">子菜單2</a></li>
                    <li><a href="">子菜單3</a></li>
                </ul>
            </li>
            <li><a href="">菜單三</a></li>
        </ul>
    </div>

2.css樣式

/*清除原樣式*/
* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}
/*一級菜單樣式*/
#nav {
    width: 1000px;
    height: 40px;
    margin: 0px auto;
    background: #f00;
    font-size: 18px;
    font-family: 微軟雅黑;
}

    #nav ul li {
        float: left;
        /*包含塊*/
        position:relative;
    }

        #nav ul li a {
            display: block;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
        }

            #nav ul li a:hover {
                color: #ffd800;
                background: #970606;
            }
/*二級菜單樣式*/
        #nav ul li ul {
        position:absolute;
        top:40px;
        left:0px;
        display:none;
        }
            #nav ul li ul li {
            float:none;
            }
            #nav ul li ul li a{
                background:#f00;
                border-top:1px solid #ccc;
            }
            /*一級菜單懸停時二級菜單可見*/
        #nav ul li:hover ul {
        display:block;
        }

效果如圖：