*{margin:opx Auto; padding:0px;}
#leibie {width:500px; height:36px; border:1px solid #03F;}
. yuyan{float:left; width:100px; height:36px; text-align:center; line-height:36px; vertical-align:middle; font-weight : Bold;}
. yuyan:hover{cursor:pointer; Background-color: #96C; color:white;}
#yuyan2 {width:100px; height:100px; position:relative; top:36px; left:-100px; Background-color: #0F0; Display:none}
#yuyan3 {width:100px; height:100px; position:relative; top:36px; left:-100px; Background-color: #FF0; Display:none}
#yuyan4 {width:100px; height:100px; position:relative; top:36px; left:-100px; Background-color: #0FF; Display:none}
#yuyan5 {width:100px; height:100px; position:relative; top:36px; left:-100px; Background-color: #F00; Display:none}
</style>
<body>
<div id= "Leibie" >
<div class= "Yuyan" onmouseover= "Xianshi (' yuyan2 ')" onmouseout= "Yincang (' yuyan2 ')" >.net</div>
<div style= "Float:left; width:0px ">
<div id= "Yuyan2" ></div>
</div>
<div class= "Yuyan" onmouseover= "Xianshi (' yuyan3 ')" onmouseout= "Yincang (' yuyan3 ')" >java</div>
<div style= "Float:left; width:0px ">
<div id= "Yuyan3" ></div>
</div>
<div class= "Yuyan" onmouseover= "Xianshi (' Yuyan4 ')" onmouseout= "Yincang (' Yuyan4 ')" >php</div>
<div style= "Float:left; width:0px ">
<div id= "Yuyan4" ></div>
</div>
<div class= "Yuyan" onmouseover= "Xianshi (' Yuyan5 ')" onmouseout= "Yincang (' Yuyan5 ')" >IOS</div>
<div style= "Float:left; width:0px ">
<div id= "Yuyan5" ></div>
</div>
</div>
</body>
<script type= "Application/javascript" >
function Xianshi (d)
{
var AA = document.getElementById (d);
Aa.style.display = "block";
}
function Yincang (d)
{
var AA = document.getElementById (d)
Aa.style.display= "None";
}
</script>
Mouse Move Reality level two menu