<style type="text/css">
<!--
li {
display: block
padding: 0
margin: 1px 0 0
list-style: none
width:150px
text-align:center
background-color:#FFCC33
}
li a:link,li a:visited{
display:block
color:#000000
padding:2px 5px
height:1%
}
li a:hover{
font-weight:bold
position:relative
background-color:#666666
}
li ul{
position:absolute
visibility:hidden
left:100px
top:0px
}
li li {
background-color:#FF6600
}
li li ul{
position:absolute
visibility:hidden
}
li li li {
background-color:#3399FF
}
li:hover ul{
visibility:visible
}
li:hover ul ul{
visibility:hidden
}
li a:hover ul{
visibility:visible
left:100px
}
li a:hover ul ul{
visibility:hidden
}
li:hover{
background-color:#666666
position:relative
}
li li:hover ul{
visibility:visible
}
li li a:hover ul{
visibility:visible
left:100px
}
-->
</style>
<ul>
<li><a href="">menu item</a></li>
<li><a href="">menu item</a></li>
<li><a href="">menu item
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">1stsubmenu item</a></li>
<li><a href="">1stsubmenu item</a></li>
<li><a href="">1stsubmenu item
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">2ndsubmenu item</a></li>
<li><a href="">2ndsubmenu item</a></li>
<li><a href="">2ndsubmenu item</a></li>
<li><a href="">2ndsubmenu item</a></li>
<li><a href="">2ndsubmenu item</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">1stsubmenu item</a></li>
<li><a href="">1stsubmenu item</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">menu item</a></li>
<li><a href="">menu item</a></li>
</ul>
CSS部分
div{width: 400px
height: 400px
border:1px solid red
float: left
}
body:hover .box{
display: block
}
.box{
width: 200px
height: 200px
background: red
display: none
}
html部分
<div ><div class="box">
</div>
</div>
