用jquery实现的一个超级简单的下拉菜单。 

效果图 

初始效果 

鼠标悬浮效果 

代码 

MagicStudio

一款集成多种AI图片处理能力的在线视觉工具，帮助用户完成抠图、擦除、背景处理和图片优化等常见编辑任务。

下载

html> 
 
 
<script></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> 
 
 
<nav> 
<ul> 
<li><a>Home 
<ul> 
<li><a>sub1</a></li> 
<li><a>sub2</a></li> 
<li><a>sub3</a></li> 
</ul> 
</a></li> 
<li><a>Programming 
<ul> 
<li><a>sub1</a></li> 
<li><a>sub2</a></li> 
<li><a>sub3</a></li> 
</ul> 
</a></li> 
<li><a>Japanese 
<ul> 
<li><a>sub1</a></li> 
<li><a>sub2</a></li> 
<li><a>sub3</a></li> 
</ul> 
</a></li> 
</ul> 
</nav> 
 
<script> 
$(document).ready(function() { 
$('nav li').hover(function() { 
$(this).find('.sub-menu').css('display', 'block'); 
}, function() { 
$(this).find('.sub-menu').css('display', 'none'); 
}); 
}); 
</script> 

更多用jquery实现的一个超级简单的下拉菜单相关文章请关注PHP中文网！