zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    IO—》字节流&字符流
    IO—》递归
    IO—》File类
    IDEA快速升级模块版本号
    redis使用Jackson2JsonRedisSerializer序列化问题
    git 创建管理多用户
    linux后台启动程序脚本实例
    linux 安装配置kafka脚本
    linux 安装配置zookeeper脚本
    linux安装配置JDK脚本
  • 原文地址:https://www.cnblogs.com/lk-kk/p/4489131.html
Copyright © 2011-2022 走看看