CSS 效果没有体现出来,所以是列排列的形式,主要是掌握其逻辑形式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>普通下拉菜单</title>
</head>
<body>
<ul>
<li><a href="#" class="mainmenu" >Menu One</a></li>
<li class="submenu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</li>
</ul>
<ul>
<li><a href="#" class="mainmenu" >Menu Two</a></li>
<li class="submenu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</li>
</ul>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$('.mainmenu').mouseenter(function(){
$('.submenu').stop(false,true).hide();
var submenu=$(this).parent().next();
submenu.css({
position:'absolute',
top:$(this).offset.top+$(this).height()+'px',
left:$(this).offset.left+'px',
zIndex:1000
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
$(this).slideUp(300);
});
});
});
</script>
</body>
</html>