js下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height:100%;
				background:black;
			}
			.box{
				width:296px;
				height:30px;
				background: url(img/box.png);
				border-radius:5px;
				margin:0 auto;
			}
			.se{
				width:35px;
				height:30px;
				background:url(img/search.jpg);
				background-position:-1px 0px;
				border-radius:5px;
				float:left;
			}
			.txt{
				width:180px;
				height:20px;
				border-radius:5px;
				float:left;
				margin-top:5px;
				cursor:pointer;
				color:white;
				font-size:12px;
				line-height:20px;
				text-indent:5px;
				overflow:hidden;
			}
			.gamefirst{
				border-radius:5px;
				background:url(img/search.jpg);
				background-position:-18px -68px;
				margin:0;
			}
			.game{
				width:180px;
				height:20px;
				font-size:12px;
				line-height:20px;
				text-indent:5px;
				color:black;
				background: #b8b8b8;
				margin:0;
				border-bottom:1px dashed white;
			}
			.game:hover{
				background:gray;
				color:white;
			}
			.btn{
				width: 70px;
				height:18px;
				float:left;
				background: white;
				font-size:12px;
				text-align: center;
				margin-top:6px;
				margin-left:5px;
				border-radius:5px;
			}
			.btn:hover{
				background:red;
				color:white;
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="se"></div>
			<div class="txt" id="TXT">
				<p class="gamefirst" id="gameFirst">请选择游戏名称</p>
				<p class="game">地下城与勇士</p>
				<p class="game">魔兽世界（国服）</p>
				<p class="game">魔兽世界（台服）</p>
				<p class="game">热血江湖</p>
				<p class="game">英雄联盟</p>
				<p class="game">QQ飞车</p>
				<p class="game">穿越火线</p>
			</div>
			<div class="btn">搜索</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var gameFirst = document.getElementById("gameFirst");
	var game = document.getElementsByClassName("game");
	var txt = document.getElementById("TXT");
	gameFirst.onclick=function(evt){
		TXT.style.overflow="visible"; 
		var e = evt || event;
		e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
	}
	for(var i=0; i<game.length; i++){
		game[i].index = i
		game[i].onclick=function(){
			TXT.style.overflow="hidden";
			gameFirst.innerText=game[this.index].innerText;
		}
	}
	document.onclick=function(){
		TXT.style.overflow="hidden";
	}
</script>
猜你喜欢
