首先：我已鏈接了外部樣式重置，所以無需自己親自寫：
reset.css網上有很多，
HTML：代碼：
注意：以下我寫的所有樣式，必須要用reset.css外部樣式表!!
1. 首先，我們來創建一個容器，用來放置整個導航欄：
HTML代碼：
CSS代碼：
/* 設置整個容器寬高背景色 */
.topmenu {
width: 100%;
height: 50px;
background: lightgreen;
}
效果圖：只有一個綠色的條哈!
2. 接下來我們要在.topmenu 容器中添加內容：
HTML代碼：
我的博客
W3school
菜鳥教程
CSS代碼：
/* 一級菜單欄.nav-container設置 */
.topmenu .nav .nav-container {
float: left; /* 一級菜單設置左浮動，使其水平排列 */
background: lightgreen; /*給整個一級菜單設置背景色(二級菜單包括在一級菜單中)*/
text-align: center; /* 對齊方式為居中 */
width: 155px; /*設置寬度*/
border-right:solid 2px #fff; /*使用右邊框分割*/
}
設置字體行高和顏色：
a {
line-height: 50px;
color: #fff;
}
3. 一級菜單欄寫完啦，接下來寫二級菜單欄，把二級菜單欄添加到一級的
下面：鄭州治療婦科哪家好 http://www.120kdfk.com/
附上完整的HTML代碼：
我的博客
工具安裝
問題解決
實戰案例
Js函數
W3school
HTML
HTML5
CSS
CSS3
菜鳥教程
Bootstrap 教程
Foundation5 教程
JavaScript 教程
CSS3 教程
JSON 教程
3. 我們完成的差不多了，現在只需要把二級菜單欄隱藏，然后讓它點擊對應的一級菜單欄的時候再出現就行了。
CSS代碼：
/* 隱藏二級菜單 */
.topmenu .nav .nav-container .nav-list {
display: none;
}
/*點擊一級菜單的時候顯示二級菜單*/
.topmenu .nav .nav-container:hover .nav-list {
display: list-item;
}
/*點擊時變色*/
.topmenu li:hover{
background: lightskyblue;
}
4. 好啦!已經全部做完啦! 網頁背景是我自己添加的，為了美化視覺效果用!
CSS代碼：
/* 網頁背景圖片 */
body {
background:url(http://attach.bbs.miui.com/forum/201202/18/090658g5shfjyixlhwjyyi.jpg);
}