在制作HTML下拉菜單時，會用到很多CSS屬性，比如：hover，list-style，float浮動，display屬性等等，如有不清楚的小伙伴可以看看我以前的文章，之前都有介紹過，或者訪問 CSS3視頻教程 。

實例示范：制作一個導航，當鼠標經過“學習視頻”時，會顯示相關的課程分類，比如JavaScript，C++等等，具體代碼如下：

HTML部分：

 div id= nav  li a href= # 首頁 /a /li  li a href= # 學習視頻 /a  li a href= # java /a /li  li a href= # jQuery /a /li  li a href= # C++ /a /li  li a href= # PHP /a /li  li a href= # JavaScript /a /li  /ul  /li  li a href= # 個人中心 /a /li  li a href= # 關于我們 /a /li  /ul  /div 

CSS部分：

 *{ margin:0px; padding:0px;}  #nav{ width:600px; height:40px; margin:0 auto;}  #nav ul{ list-style:none;}  #nav ul li{width: 150px; float:left; line-height:40px; text-align:center; position:relative;}  #nav ul li a{ text-decoration:none; color:#000; display:block;text-align: center;}  #nav ul li a:hover{ color:#FFF; background:#333}  #nav ul li ul{ position:absolute; display:none;}  #nav ul li ul li{ float:none; line-height:30px; text-align:left;}  #nav ul li ul li a{ width:100%;}  #nav ul li ul li a:hover{ background-color:#06f;}  #nav ul li:hover ul{ display:block}

效果圖：

以上主要介紹了如何用HTML和CSS制作下拉菜單，工作中用的比較多，有需要的朋友可以直接拿去使用，或者修改成自己喜歡的樣式，希望這篇文章對你有所幫助。

【相關教程推薦】

1. HTML視頻教程
2. CSS視頻教程
3. bootstrap教程

以上就是HTML+CSS制作簡單下拉菜單的實例代碼的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。