<!DOCTYPE html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>模拟select控件</title>
    <style>
        html,body{height:100%;overflow:hidden;}
        body,div,form,h2,ul,li{margin:0;padding:0;}
        ul{list-style-type:none;}
        body{background:#23384e;font:12px/1.5 \5fae\8f6f\96c5\9ed1;}
        #search,#search form,#search .box,#search .select,#search a{background:url(search.jpg) no-repeat;}
        #search,#search .box,#search form{height:34px;}
        #search{position:relative;width:350px;margin:10px auto;}
        #search .box{background-position:right 0;}
        #search form{background-repeat:repeat-x;background-position:0 -34px;margin:0 20px 0 40px;}
        #search .select{float:left;color:#fff;width:190px;height:22px;cursor:pointer;margin-top:4px;line-height:22px;padding-left:10px;background-position:0 -68px;}
        #search a{float:left;width:80px;height:24px;color:#333;letter-spacing:4px;line-height:22px;text-align:center;text-decoration:none;background-position:0 -90px;margin:4px 0 0 10px;}
        #search a:hover{color:#f60;background-position:-80px -90px;}
        #search .sub{position:absolute;top:26px;left:40px;color:#fff;width:198px;background:#2b2b2b;border:1px solid #fff;display:none;}
        #search .sub li{height:25px;line-height:24px;cursor:pointer;padding-left:10px;margin-bottom:-1px;border-bottom:1px dotted #fff;}
        #search .sub li:hover{background:#8b8b8b;}
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oSelect = document.getElementById("select");
            var droplist = document.getElementById("sub");
            oSelect.onclick = function(e){
                e.stopPropagation();
                droplist.style.display = "block";
            }
            var items = droplist.children;
            for(var i=0; i<items.length; i++){
                items[i].onclick = function(){
                    oSelect.innerHTML = this.innerHTML
                    droplist.style.display = "none";
                }
            }
            document.onclick = function(){
                droplist.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <div id="search">
        <div class="box">
            <form>
                <span id="select" class="select">请选择游戏名称</span>
                <a href="javascript:;">搜索</a>
            </form>
        </div>
        <ul id="sub" class="sub">
            <li>地下城与勇士</li>
            <li>魔兽世界（国服）</li>
            <li>魔兽世界（台服）</li>
            <li>热血江湖</li>
            <li>大话西游II</li>
            <li>QQ幻想世界</li>
        </ul>
    </div>
</body>
 
</html>

css模拟下拉菜单的更多相关文章

  1. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  2. HTML+CSS写下拉菜单

    今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...

  3. CSS的下拉菜单被挡住，修改Z-INDEX也不成功

    CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...

  4. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  5. 纯css实现下拉菜单

    今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...

  6. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  7. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

  8. 11.css定义下拉菜单

    注意点: 1.设置a标签的width 和 height 的时候,直接设置是没用的,可以以这样两种方式设置 (1). display:block; (2). float:left; 2.设置下拉菜单,最 ...

  9. jQuery+css模拟下拉框模糊搜索的实现

    html: @*输入框*@ <div> <input type="text" style="width: 85%; height: 34px;" ...

随机推荐

  1. arcgis-tomcat-cors

    C:\Program Files\ArcGIS\Server\framework\runtime\tomcat\webapps\arcgis#rest\WEB-INF\ (1)添加cors-filte ...

  2. C高级第四次作业

    作业要求一 最简单的wordcount 具体要求:http://www.cnblogs.com/xinz/p/7426280.html 1.设计思路: 0.0版本设计思路: 第一步:读入用户想要操作的 ...

  3. MyEclipse快捷键及经验总结 绝对的有用 太给力了

    Ctrl+Shift+L    显示所有快捷键  Ctrl+K      参照选中的词(Word)快速定位到下一个  Ctrl+Shift+K    参照选中的词(Word)快速定位到上一个    C ...

  4. Docker私有镜像仓库

    使用阿里云加速: tee /etc/docker/daemon.json << 'EOF' { "registry-mirrors": [ "https:// ...

  5. Xcode7（ linker command failed with exit code 1）

    ”Build Settings”->”Enable Bitcode”设置为NO ,因为有些SDK不支持Bitcode

  6. MySQL--查询表统计信息

    ============================================================= 可以用show table status 来查看表的信息,如:show ta ...

  7. C语言面试题4

    第二部分:程序代码评价或者找错 1.下面的代码输出是什么,为什么?void foo(void){    unsigned int a = 6;    int b = -20;    (a+b > ...

  8. gphoto2 canon eos450d

    hjs@ubuntu:~$ gphoto2 --capture-image-and-download                                                   ...

  9. 【转】每天一个linux命令（55）：traceroute命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/03/07/2947326.html 通过traceroute我们可以知道信息从你的计算机到互联网另一端的 ...

  10. Nginx服务器抵御CC攻击的相关配置讲解

    CC攻击利用代理服务器向网站发送大量需要较长计算时间的URL请求,如数据库查询等,导致服务器进行大量计算而很快达到自身的处理能力而形成DOS.而攻击者一旦发送请求给代理后就主动断开连接,因??代理并不 ...