模拟一个类似select的效果

最新推荐文章于 2018-06-04 01:36:13 发布

侠之大者为国为民

最新推荐文章于 2018-06-04 01:36:13 发布

阅读量760

点赞数

分类专栏： HTML5 文章标签： html css

本文链接：https://blog.csdn.net/sofeien/article/details/54428735

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>模拟一个下拉列表的效果</title>
        <style type="text/css">
		* {
			margin:0;
			padding:0;
		}
        div#nav {
            border:1px solid green; 
			width:100px;
			height:20px;
			margin-left:1px;
			line-height:20px;
			padding-left:5px;
			position:relative;
		}
		ul#list {
			list-style:none;
			position:absolute;
		    left:5px;
			width:100px;
			display:none;
		}
		ul#list li {
			border:1px solid green;
			border-bottom:0;
			border-top:0;
			width:100px;
			padding-left:5px;
			margin-left:-6px;
		}
		ul#list li.last {
			border-bottom:1px solid green;
		}
		
		ul#list li:hover {
			background-color:#eee;
			
		}
		button#btn {
			position:absolute;
			left:120px;
			top:2px;
		}
        </style>
		<script>
			
			window.onload = function() {
				var i;
				var nav = document.getElementById('nav');
				var ul = document.getElementById('list');
				var show = document.getElementById('nav').childNodes[1];
				var lis = document.getElementsByTagName("li");
				for(i=0;i<lis.length;i++){
					lis[i].onclick = function() {
						var txt = this.innerHTML;
						show.innerHTML = txt;
						ul.style.display = "none";
					}
				}
				
				nav.onmouseover = function() {
					ul.style.display = "block";
					
				}
			}
			
		</script>
    </head>
    <body>
        <div id=nav>
			<span>请选择</span>
			<ul id="list">
				<li>网页</li>
				<li>电影</li>
				<li>游戏</li>
				<li class='last'>贴吧</li>
			</ul>
		</div>
				
    </body>
</html>

侠之大者为国为民

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟一个类似select的效果

模拟一个下拉列表的效果 * { margin:0; padding:0; } div#nav { border:1px solid green; width:100px; height:20px; margin-left:1px; line-height:20px; padding-lef
复制链接

扫一扫