一模一样操作的，前面都显示正常，为啥到了最后一步鼠标移动到一级菜单display：block这个效果就是没用呢？
<style type="text/css">
*{ margin:0px; padding:0px;}
ul{margin: 0;padding: 0}
#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
ul li a{text-decoration: none;display: block;width:90px;height: 40px;background: red;line-height: 40px;color:#fff;text-align: center;}
ul li{list-style: none;float: left;overflow: hidden;}
ul li ul li{margin-top: 2px;background: #ccc;float: none;display: none;}
ul li ul li:hover{background: #07b;}
ul li:hover{background: #5ab56f;}
ul li:hover ul{display: block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a></li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
