码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-05-08 23:49:24      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:

<!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>

 

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

标签:

原文地址:http://www.cnblogs.com/lk-kk/p/4489131.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!