<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.7.2.min.js"></script>
<style>
div, ul, li{margin:0px;padding:0px;list-style-type:none;}
#menu{width:120px;margin:0px auto;text-align:center;}
.menuItem{font-size:16px;font-weight:900;border:1px solid red;cursor:pointer;}
.subMenu{display:none;opacity:0;}
.subItem{font-size:14px;font-weight:normal;}
</style>
<script>
$(function () {
$(".subItem:even").css("background-Color", "#ddd");
$(".menuItem").hover(function () {
$(this).children().stop().animate({ opacity: 1.0,height:‘show‘ });
}, function () {
$(this).children().stop().animate({ opacity: 0, height: ‘hide‘ });
});
});
</script>
</head>
<body>
<div style="margin:40px auto;">
<ul id="menu">
<li class="menuItem">
greens
<ul class="subMenu">
<li class="subItem">Chinesecabbage</li>
<li class="subItem">potato</li>
<li class="subItem">tomato</li>
</ul>
</li>
</ul>
</div>
</body>
</html>