HTML+CSS實(shí)現(xiàn)簡單下拉菜單效果
發(fā)布時(shí)間：2017-06-22 11:02:38 作者：佚名 
我要評(píng)論
我要評(píng)論使用Html+css實(shí)現(xiàn)簡單的下拉菜單代碼非常簡單，具有參考借鑒價(jià)值，需要的的朋友參考下吧
使用Html+css實(shí)現(xiàn)簡單的下拉菜單代碼非常簡單，需要的的朋友參考下吧：
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉框</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#nav{ width:600px; height:40px; margin:0 auto;}
#nav ul{ list-style:none;}
#nav ul li{ float:left; line-height:40px; text-align:center; position:relative;}
#nav ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;}
#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}
</style>
</head>
<div id="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">學(xué)習(xí)中心</a>
<ul>
<li><a href="#">java</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">C語言</a></li>
</ul>
</li>
<li><a href="#">個(gè)人中心</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</div>
<body>
</body>
</html>
效果圖：
以上所述是小編給大家介紹的HTML+CSS實(shí)現(xiàn)簡單下拉菜單效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
基于css3制作圓形下拉框，點(diǎn)擊滑動(dòng)展開收縮城市菜單，支持多選/勾選城市效果。這是一款實(shí)用的下拉菜單選擇代碼。非常不錯(cuò)，感興趣的朋友前來下載使用2019-05-28
CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)
這篇文章主要介紹了CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-18
HTML+CSS實(shí)現(xiàn)下拉菜單的實(shí)現(xiàn)
這篇文章主要介紹了HTML+CSS實(shí)現(xiàn)下拉菜單的實(shí)現(xiàn)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-18- 下拉菜單在很多網(wǎng)頁中都能應(yīng)用到，這篇文章主要介紹了純CSS實(shí)現(xiàn)的大型下拉菜單的示例代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編2018-05-03
這篇文章主要介紹了純CSS實(shí)現(xiàn)下拉菜單的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-09
純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼
純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼，當(dāng)鼠標(biāo)懸停波浪形菜單欄，彈出列表信息，鼠標(biāo)離開自動(dòng)收縮。效果非常逼真，本段代碼可以在各個(gè)網(wǎng)頁使用，有需要的朋友可2017-12-18
這是一個(gè)使用HTML和純CSS代碼來制作的大型下拉菜單效果。適合用于欄目分類較多的網(wǎng)站使用，歡迎下載2017-10-26
這篇文章主要介紹了利用純css做一個(gè)下拉菜單功能的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-01
