[HTML部分]
<div
id="nav">
<ul>
<li><a
href="#">菜单零</a></li>
<li><a
href="#">菜单一</a></li>
<ul
class="childnav">
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
</ul>
<li><a
href="#">菜单二</a>
<ul
class="childnav">
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
<li><a
href="#">子菜单</a></li>
</ul>
</li>
<li><a
href="#">菜单四</a></li>
<!--
/nav
-->
</ul>
</div>
[JS部分]
<script
type="text/javascript">
$(document).ready(function(){
$("#nav
ul
li
a").hover(function()
{
$(this).parent().find("ul.childnav").slideDown('fast').show()
$(this).parent().hover(function()
{
},
function(){
$(this).parent().find("ul.childnav").slideUp('slow')
})
})
})
</script>
[CSS部分]
<style
type="text/css">
*
{
padding:0
margin:0
list-style:none
}
#nav
{
margin:200px
}
#nav
ul
{
background:#333
padding:5px
float:left
width:100%
}
#nav
li
{
float:left
padding:0
5px
position:relative
}
#nav
li
a
{
float:left
padding:0
5px
display:block
text-align:center
color:#fff
text-decoration:none
font-size:12px
height:18px
line-height:18px
}
#nav
li
a:hover,
#nav
li
a.on
{
background:#444
text-decoration:none
}
#nav
li
ul
{
display:
none
position:
absolute
left:
-2px
top:
18px
background:
#999
border-bottom:3px
solid
#333
z-index:1000
}
#nav
li
ul
li
{
background:none
float:none
padding:0
}
#nav
li
ul
a
{
float:none
}
#nav
li
ul
a:hover
{
background:#888
}
#nav
li:hover
ul,
#nav
li.over
ul
{
display:
block
z-index:999
}
</style>
html部分<div id="posandfloat"></div>
css部分
#posandfloat{
float:left //浮动属性，左浮动
position:relative //定位属性，相对定位
margin: 5px 8px//区块属性，区块与上级元素的距离
}
不自动自动填充式什么意思，但是我想这个功能应该使用js实现。
