jquery實(shí)現(xiàn)下拉菜單

效果:

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)易于使用并且具有良好的響應(yīng)性。

jquery實(shí)現(xiàn)下拉菜單

代碼:

<!DOCTYPE html>

<html>

<head>

<title>JQuery實(shí)現(xiàn)下拉菜單</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

*{margin: 0px;padding: 0px}

.nav{background-color: #eee;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:0 10px;}

.nav-ul li a:hover{color: #FFF;background-color: #666}

.nav-ul li .nav-ul-li-ul{position: absolute;left: 0px; top:40px;display: none;}

.nav-ul li .nav-ul-li-ul li {list-style: none; float: none;background-color: #eee;margin-top: 2px;}

.nav-ul li .nav-ul-li-ul li a:hover{color: #FFF;background-color: #36e}

</style>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

<script type="text/javascript">

$(function () {

//鼠標(biāo)懸浮到元素上

$(".nav-ul .nav-ul-li").mouseover(function(){

$(this).children(".nav-ul-li-ul").show();

});

//鼠標(biāo)離開元素時(shí)

$(".nav-ul .nav-ul-li").mouseout(function(){

$(this).children(".nav-ul-li-ul").hide();

});

});

</script>

</head>

<body>

<div class="nav">

<ul class="nav-ul">

<li><a href="">首頁</a></li>

<li class="nav-ul-li">

<a href="">我的課程</a>

<ul class="nav-ul-li-ul">

<li><a href="">html</a></li>

<li><a href="">css</a></li>

<li><a href="">javascript</a></li>

</ul>

</li>

<li><a href="">關(guān)于我們</a></li>

</ul>

</div>

</body>

</html>

文章題目：jquery實(shí)現(xiàn)下拉菜單
網(wǎng)頁路徑：http://muchs.cn/article10/ihcddo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營銷推廣、虛擬主機(jī)、網(wǎng)站排名、定制開發(fā)、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)