<!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. [编程题] N阶楼梯上楼问题

    import sys for line in sys.stdin: N=int(line.split()[0]) d1=1 d2=2 if(N==1): print 1 continue elif(N ...

  2. [LeetCode&Python] Problem 461. Hamming Distance

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  3. Unity插件-NGUI使用教程

    Unity插件-NGUI使用教程 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 NGUI 一款强大的次 ...

  4. 强连通分量【k 算法、t 算法】

    连通分量就是一个各个顶点能互相达到的图 无向图的连通分量选取任意一个顶点使用DFS遍历即可,遍历完所有顶点所需的DFS的次数就是连通分量的数量 有向图的强连通分量由于是有向的[从A点开始DFS能访问到 ...

  5. Mybatis中parameterType、resultMap、statementType等等配置详解(标签中基本配置详解)

    一.(转自:https://blog.csdn.net/majinggogogo/article/details/72123185) 映射文件是以<mapper>作为根节点,在根节点中支持 ...

  6. POJ1733 Parity game

    题意 Language:Default Parity game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13833 Acc ...

  7. USB速率识别

    低速设备D-上有一个1.5k欧的上拉电阻.高速和全速设别在D+上有一1.5k欧上拉电阻.连接后通过检测电压变化来了解设备是否为低速设别. 低速下:D+为“0”,D-为“1”是为“J”状态,“K”状态相 ...

  8. HBase scan shell操作详解

    创建表 create 'test1', 'lf', 'sf' lf: column family of LONG values (binary value) -- sf: column family ...

  9. [CLPR] 卷积还是相关? - Opencv之filter2D探究

    I am doing something about convolving images in Python and for sake of speed I chose opencv 2.4.9. O ...

  10. Tcp 编程 的时代 已经到来

    这是 一个 网友 在 Github 上的 项目  SmartRoute  : https://github.com/IKende/SmartRoute ZooKeeper 和 Consul 的 “投票 ...