用css是可以实现这种效果，不够要改一下HTML框架：

<div class="A">
<div class="B" >
<ul>
<li id='li1'><a href="webpage/about.htm">模块1</a>
<div id="C" class="D">
<a href="webpage/about.htm">模块1.1</a>
<a href="webpage/about.htm">模块1.2</a>
<a href="webpage/about.htm">模块1.3</a>
<a href="webpage/about.htm">模块1.4</a>
</div>
</li>
<li><a href="webpage/about.htm">模块2</a></li>
<li><a href="webpage/about.htm">模块3</a></li>
</ul>
</div>
</div>

CSS样式：

*{padding: 0;margin:0;}
li{width: 100px;height: 30px;background: black;text-align: center;}
a{text-decoration: none;color:#fff;margin-bottom: 10px;}
.B li{float: left;}
#C{clear: both;}
#C a{color: black;padding: 8px;display: none;}
#li1:hover a{display: block;}

推荐您阅读更多有关于“”的文章