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;
        }

效果如圖：