亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單

 更新時(shí)間：2014年05月18日 16:24:33   作者：  
這篇文章主要介紹了用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單,需要的朋友可以參考下
用jquery實(shí)現(xiàn)的一個(gè)超級(jí)簡(jiǎn)單的下拉菜單。

效果圖

初始效果
 
鼠標(biāo)懸浮效果
 
代碼
復(fù)制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<style>

nav a {
text-decoration: none;
}
nav > ul > li {
float: left;
text-align: center;
padding: 0 0.5em;
}

nav li ul.sub-menu {
display: none;
padding-left: 0 !important;
}

.sub-menu li {
color: white;
}

.sub-menu li:hover {
background-color: black;
}

.sub-menu li:hover a {
color: white;
}

ul {
list-style: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Programming
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Japanese
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('nav li').hover(function() {
$(this).find('.sub-menu').css('display', 'block');
}, function() {
$(this).find('.sub-menu').css('display', 'none');
});
});
</script>
</html>

相關(guān)文章

最新評(píng)論