一款兼容性不错div模拟select下拉菜单

时间：2022-06-25 21:21:10 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
	.mod_select{position:absolute;left:30%;top:100px;font-familY:Arial, Helvetica, sans-serif;}
	.mod_select ul{margin:0;padding:0;}
	.mod_select ul li{list-style-type:none;float:left;margin-left:20px;}
	.select_label{color:#982F4D;float:left;line-padding-right:10px;font-size:12px;font-weight:700;}
	.select_box{float:left;border:solid 1px #EDE7D6;color:#444;position:relative;cursor:pointer;background:url(../select_bg.jpg) repeat-x;font-size:12px;}
	.selet_open{display:inline-block;border-left:solid 1px #E5E5E5;position:absolute;right:0;top:0;background:url(../select_up.jpg) no-repeat center center;}
	.select_txt{display:inline-block;padding-left:10px;line-cursor:text;overflow:hidden;}
	.option{;border:solid 1px #EDE7D6;position:absolute;top:24px;left:-1px;z-index:2;overflow:hidden;display:none;}
	.option a{display:block;line-text-align:left;padding:0 10px;width:100%;background:#fff;}
	.option a:hover{background:#FDE0E5;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
			$(".select_box").click(function(event){   
				event.stopPropagation();
				$(this).find(".option").toggle();
				$(this).parent().siblings().find(".option").hide();
			});
			$(document).click(function(event){
				var eo=$(event.target);
				if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
				$('.option').hide();									  
			});
			/*赋值给文本框*/
			$(".option a").click(function(){
				var value=$(this).text();
				$(this).parent().siblings(".select_txt").text(value);
				$("#select_value").val(value)
			 })
		})
</script>
</head>
<body>
<div class="mod_select">
	<ul>
    	<li>
            <span class="select_label">sort buy:</span>
            <div class="select_box">
            	<span class="select_txt"></span><a class="selet_open"><b></b></a>
            	<div class="option">
                	<a>1</a>
                    <a>2</a>
                    <a>3</a>

<div class="articles">
                        <div class="tit02">
                            <h4>相关文章</h4>
                        </div>
                        <ul>
                                                                                                <li>
                                        <a target="_blank" href="/new/400878.htm">比特派官网下载最新版</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400877.htm">比特币钱包客户端官网下载2024版</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400876.htm">usdt钱包苹果官方版</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400874.htm">gopay支付平台安卓版2024</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400875.htm">usdt钱包官方下载苹果版</a>
                                        <span>04-26</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/400873.htm">币赢交易所app官网版2024</a>
                                        <span>04-26</span>
                                    </li>
                                                                                    </ul>
                    </div>
                </div>

</div>

</div>
        </div>
    </div>
</div>

<div class="hot-column">
    <div class="cont">
        <div class="tit">
            <h4>热门栏目</h4>
        </div>
        <ul class="clearfix">
            <li>
                <h6><a href="/list-1/" target="_blank">php教程</a></h6>
                <a href="/list-45/" target="_blank">php入门</a>
                <a href="/list-46/" target="_blank">php安全</a>
                <a href="/list-47/" target="_blank">php安装</a>
                <a href="/list-48/" target="_blank">php常用代码</a>
                <a href="/list-49/" target="_blank">php高级应用</a>
            </li>
            <li>
                <h6><a href="/list-2/" target="_blank">asp.net教程</a></h6>
                <a href="/list-78/" target="_blank">基础入门</a>
                <a href="/list-79/" target="_blank">.Net开发</a>
                <a href="/list-80/" target="_blank">C语言</a>
                <a href="/list-81/" target="_blank">VB.Net语言</a>
                <a href="/list-82/" target="_blank">WebService</a>
            </li>
            <li>
                <h6><a href="/list-6/" target="_blank">手机开发</a></h6>
                <a href="/list-208/" target="_blank">安卓教程</a>
                <a href="/list-209/" target="_blank">ios7教程</a>
                <a href="/list-210/" target="_blank">Windows Phone</a>
                <a href="/list-211/" target="_blank">Windows Mobile</a>
                <a href="/list-212/" target="_blank">手机常见问题</a>
            </li>
            <li>
                <h6><a href="/list-3/" target="_blank">css教程</a></h6>
                <a href="/list-99/" target="_blank">CSS入门</a>
                <a href="/list-100/" target="_blank">常用代码</a>
                <a href="/list-101/" target="_blank">经典案例</a>
                <a href="/list-102/" target="_blank">样式布局</a>
                <a href="/list-103/" target="_blank">高级应用</a>
            </li>
            <li>
                <h6><a href="/list-4/" target="_blank">网页制作</a></h6>
                <a href="/list-136/" target="_blank">设计基础</a>
                <a href="/list-137/" target="_blank">Dreamweaver</a>
                <a href="/list-138/" target="_blank">Frontpage</a>
                <a href="/list-139/" target="_blank">js教程</a>
                <a href="/list-140/" target="_blank">XNL/XSLT</a>
            </li>
            <li>
                <h6><a href="/list-7/" target="_blank">办公数码</a></h6>
                <a href="/list-236/" target="_blank">word</a>
                <a href="/list-237/" target="_blank">excel</a>
                <a href="/list-238/" target="_blank">powerpoint</a>
                <a href="/list-239/" target="_blank">金山WPS</a>
                <a href="/list-240/" target="_blank">电脑新手</a>
            </li>
            <li>
                <h6><a href="/list-11/" target="_blank">jsp教程</a></h6>
                <a href="/list-68/" target="_blank">Application与Applet</a>
                <a href="/list-69/" target="_blank">J2EE/EJB/服务器</a>
                <a href="/list-70/" target="_blank">J2ME开发</a>
                <a href="/list-71/" target="_blank">Java基础</a>
                <a href="/list-72/" target="_blank">Java技巧及代码</a>
            </li>
        </ul>
    </div>
</div>

<div class="footer">
    <div class="cont">
        <p>
            <a href="/" target="_self">一聚教程网</a>|
            <a href="javascript:;" class="about" target="_self">关于我们</a>|
            <a href="javascript:;" class="contact" target="_self">联系我们</a>|
            <a href="javascript:;" class="gg_contact" target="_self">广告合作</a>|
            <a href="javascript:;" class="friend_link" target="_self">友情链接</a>|
            <a href="javascript:;" class="copyright_notice" target="_self">版权声明</a>
        </p>
        <p>
            <span>copyRight@2007-2022 www.111CN.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian"></a></span>
        </p>
        <p>
            <span>
                网站内容来自网络整理或网友投稿如有侵权行为请邮件:111cn.com@163.com 我们24小时内处理
            </span>
        </p>
    </div>
</div>
<script src="/jspc/func.js" type="text/javascript"></script>

推荐专题

最新下载

热门教程

一款兼容性不错div模拟select下拉菜单