jQuery下拉菜單的實現(xiàn)代碼

更新時間：2016年11月03日 10:36:27 作者：李璐譽

這篇文章主要介紹了jQuery下拉菜單的實現(xiàn)代碼的相關(guān)資料,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下

jQuery是一款流行已久的Javascript框架,確實很好用。今天我給大家介紹jquery下拉菜單的實現(xiàn)代碼，具體代碼如下所述：

<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
* {
padding: 0;
margin: 0;
ul {
list-style: none;
.wrap {
width: 730px;
height: 50px;
margin: 100px auto 0;
background-color: lightgray;
padding-left: 10px;
border-radius: 10px;
padding-bottom: 3px;
.wrap li {
float: left;
width: 130px;
height: 50px;
margin-right: 10px;
position: relative;
.wrap a {
margin-top: 3px;
color: gray;
text-decoration: none;
display: block;
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 21px;
border-radius: 10px;
.wrap li ul {
position: absolute;
display: none;
.wrap li ul li {
margin-top: 3px;
.wrap li ul li a:hover{
color: red;
<script src="jquery-1.11.1.min.js"></script>
$(document).ready(function () {
$(".wrap li").hover(function () {
});
<div class="wrap">
<a href="#">中國</a>
<li><a href="#">廣州</a></li>
<li><a href="#">深圳</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">上海</a></li>
<a href="#">美國</a>
<li><a href="#">舊金山</a></li>
<li><a href="#">華盛頓</a></li>
<li><a href="#">西雅圖</a></li>
<a href="#">英國</a>
<li><a href="#">倫敦</a></li>
<li><a href="#">愛丁堡</a></li>
<li><a href="#">伯明翰</a></li>
<a href="#">南非</a>
<li><a href="#">約翰內(nèi)斯堡</a></li>
<li><a href="#">伊麗莎白港</a></li>
<li><a href="#">茨瓦內(nèi)</a></li>
</li><li>
<a href="#">澳大利亞</a>
<li><a href="#">堪培拉</a></li>
<li><a href="#">悉尼</a></li>
<li><a href="#">墨爾本</a></li
</ul></html>

以上所述是小編給大家介紹的jQuery下拉菜單的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

jQuery插件Timelinr 實現(xiàn)時間軸特效
時間軸是依據(jù)時間順序，把一方面或多方面的事件串聯(lián)起來，形成相對完整的記錄體系，再運用圖文的形式呈現(xiàn)給用戶，本文給大家收集了互聯(lián)網(wǎng)上的效果比較不錯的一款，分享給大家
2015-10-10
jQuery Migrate 插件用法實例詳解
jQuery Migrate是應(yīng)用遷移輔助插件，是用于高級版本兼容低級版本輔助插件。這篇文章主要介紹了jQuery Migrate 插件用法 ,需要的朋友可以參考下
2019-05-05
jquery表格datatables實例解析直接加載和延遲加載
這篇文章主要針對jquery表格datatables實例進(jìn)行解析，可以直接加載和延遲加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
jQuery父級以及同級元素查找介紹
父級以及同級元素的查找在使用過程中還是蠻頻繁的，下面為大家介紹下jQuery是如何實現(xiàn)的，感興趣的朋友可以參考下
2013-09-09
詳解jquery事件delegate(）的使用方法
這篇文章主要詳解了jquery事件delegate(）的使用方法，delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時運行的函數(shù)，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery Dialog 彈出層對話框插件
網(wǎng)上這種插件很多，但是沒一個合適的，大部分都做得很大，功能齊全。于是自己做了這個小插件，順便學(xué)習(xí)下jQuery插件的寫法。
2010-08-08
Bootstrap+Jquery實現(xiàn)日歷效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap+Jquery實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
基于jquery的下拉框改變動態(tài)添加和刪除表格實現(xiàn)代碼
以前很少用jquery，現(xiàn)在工作需要，用上了，感覺真的很方便！不用再像以前那樣寫那么多多余的Js了！看來得在jquery上花點功夫呢！
2011-03-03
jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHei
jQuery的位置函數(shù)(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小應(yīng)用
2010-03-03
jquery實現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼
這篇文章主要介紹了jquery實現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼,涉及jquery鼠標(biāo)click點擊事件及頁面元素動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09