導航下拉麵板能讓導航裝載更多的內容，新增更多的關鍵詞，有利於優化，也使網站顯得更加高階大氣，如果您需要，我就來提供！
工具/原料
Dreamwere，新手推薦
懂得html程式碼原理，能看懂css定位
方法/步驟
首先我們來看看下拉麵板的效果吧，這個事稍微複雜一點的下拉麵板，我們會一步步為您講解，如何製作出這樣一個下拉麵板，但前提是你需要了解CSS的定位知識和HTML程式碼，因此沒有這些基礎的同學要先學一下HTML程式碼和CSS（層疊樣式表）的知識。
下面我們先來製作一個簡單的導航：
css程式碼片段
html程式碼片段
- 首頁
- 關於建冶
- 新聞資訊
- 產品中心
- 工程應用
- 人力資源
接下來就著手下拉麵板設計，首先我們來設計一個簡單的，我們擷取上一段程式碼中的
- 關於建冶
css片段
.nav a {display:block}
.nav a:hover { display:block;background:#F00}
/*下拉列表*/
.nav ul{display:none;}
.nav li:hover ul{display:block; position:absolute; width:130px; top:46px; background:#069;}
.nav li:hover ul li{ border-bottom:#99C 1px solid; border-right:none;}
複雜的導航面板其實也是也定位技術一步步掌握的，下面來個產品的面板：
結構程式碼塊兒
css程式碼塊兒
/*產品下拉麵板*/
li#pro:hover ul#menu { width:960px; position:absolute; top:46px; background:#069; margin-left:-375px; z-index:2 }
li#pro:hover ul#menu li { width:180px; height:200px; line-height:24px; background:#069; float:left; z-index:3; overflow:hidden;}
li#pro:hover ul#menu li p a{ display:block; border-bottom:0; color:#FFF; background:none; text-align:left; padding-left:30px; z-index:3}
li#pro:hover ul#menu li p a:hover{display:block;background:#F00; text-decoration:underline; z-index:3}
