欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML+CSS實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果

  發(fā)布時(shí)間：2017-06-22 11:02:38   作者：佚名   我要評(píng)論
使用Html+css實(shí)現(xiàn)簡(jiǎn)單的下拉菜單代碼非常簡(jiǎn)單，具有參考借鑒價(jià)值，需要的的朋友參考下吧

使用Html+css實(shí)現(xiàn)簡(jiǎn)單的下拉菜單代碼非常簡(jiǎ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="#">首頁(yè)</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語(yǔ)言</a></li>    
            </ul>            
        </li>    
        <li><a href="#">個(gè)人中心</a></li>    
        <li><a href="#">關(guān)于我們</a></li>    
    </ul>    
</div>    
<body>    
</body>    
</html>

效果圖：
 

圖1
 

圖2

以上所述是小編給大家介紹的HTML+CSS實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

  • js+css3制作下拉城市菜單多選代碼

    基于css3制作圓形下拉框，點(diǎn)擊滑動(dòng)展開(kāi)收縮城市菜單，支持多選/勾選城市效果。這是一款實(shí)用的下拉菜單選擇代碼。非常不錯(cuò)，感興趣的朋友前來(lái)下載使用
    2019-05-28

  • CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)

    這篇文章主要介紹了CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-18

  • HTML+CSS實(shí)現(xiàn)下拉菜單的實(shí)現(xiàn)

    這篇文章主要介紹了HTML+CSS實(shí)現(xiàn)下拉菜單的實(shí)現(xiàn)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-18

  • 純CSS實(shí)現(xiàn)的大型下拉菜單的示例代碼

    下拉菜單在很多網(wǎng)頁(yè)中都能應(yīng)用到，這篇文章主要介紹了純CSS實(shí)現(xiàn)的大型下拉菜單的示例代碼的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編
    2018-05-03

  • 純CSS實(shí)現(xiàn)下拉菜單的示例代碼

    這篇文章主要介紹了純CSS實(shí)現(xiàn)下拉菜單的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-09

  • 純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼

    純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼，當(dāng)鼠標(biāo)懸停波浪形菜單欄，彈出列表信息，鼠標(biāo)離開(kāi)自動(dòng)收縮。效果非常逼真，本段代碼可以在各個(gè)網(wǎng)頁(yè)使用，有需要的朋友可
    2017-12-18

  • 純CSS+HTML大型下拉菜單特效

    這是一個(gè)使用HTML和純CSS代碼來(lái)制作的大型下拉菜單效果。適合用于欄目分類(lèi)較多的網(wǎng)站使用，歡迎下載
    2017-10-26

  • 利用純css做一個(gè)下拉菜單功能的示例代碼

    這篇文章主要介紹了利用純css做一個(gè)下拉菜單功能的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-09-01

最新評(píng)論