div居中鼠标悬浮显示下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
    position: absolute;
    
    width: 100%;
    height: 50px;
    z-index: 1;
    background-color:#F00;
    
}
#apDiv2 {
    position: relative;
    margin:auto;
    width:960px;
    height: 50;
    z-index: 2;
    background-color:#3F6
}
.apDivx {
    position: relative;
    float:left;
    width: 99px;
    height: 50px;
    z-index: 3;
    background-color:#FF0;
    overflow:hidden;
    
}
.apDivy {
    position: relative;
    float:left;
    width: 99px;
    height: 50px;
    z-index: 3;
    background-color:#FF0;
    
    
}
#apDiv4 {
    position: absolute;
    
    top: 50px;
    width: 200px;
    height: 91px;
    z-index: 2;
    background-color:#F3C
}
</style>
</head>

<body>
<div id="apDiv1">


    <div id="apDiv2">
        <div id="apDiv3" class="apDivx" onmouseover="this.className='apDivy'"  onmouseout="this.className='apDivx'">
        首页
                <div id="apDiv4">
            战争<br>
            剧情<br>
            爱情<br>
               </div>
        </div>
        <div id="apDiv3" class="apDivx" onmouseover="this.className='apDivy'"  onmouseout="this.className='apDivx'">
        电影
                <div id="apDiv4">
            速度与激情7<br>
            复仇者联盟2<br>
            左耳<br>
               </div>
        </div>



    </div>
</div>

</body>
</html>

 

posted @ 2015-05-08 23:09  XCml  阅读(670)  评论(0编辑  收藏  举报