高分求助！！网易首页 顶部账号密码右边那个“选择去向”下拉用div+css怎么做的？？希望给出代码！
发布网友
发布时间：2022-04-21 08:12
共1个回答
热心网友
时间：2022-04-21 09:42
<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/css">
body{margin:0}
ul{ margin:0; padding:0; list-style:none;}
li{ float:left;}
.nav{color:#4B4B4B; font-size:12px; margin-top:8px}
.navItem{ width:100px;}
.menu1{ border:1px solid #C4C4C4; background-color:#FFF; width:110px; position:absolute; left:0; +top:18px; padding:1px; display:none;}
.menu1 li{ width:100%}
.sep{ border-bottom:1px solid #C4C4C4}
.menu1 a{ color:#4B4B4B; text-decoration:none; display:block; padding:3px 6px; margin:1px}
.menu1 .act{ color:#4B4B4B;}
.menu1 .dis{ color:#ccc;}
</style>
<script>
function over(o){
if(o.className == "act"){
o.style.backgroundColor = "#85B6EA";
o.style.color = "#FFF";
}
}
function out(o){
if(o.className == "act"){
o.style.backgroundColor = "#FFF";
o.style.color = "#4B4B4B";
}
}
var isOpenMenu = false;
function openMenu(_id){
var temp = document.getElementById(_id);
if(temp.style.display != "block") {temp.style.display = "block"; isOpenMenu=true;}
}
document.onclick = function(){
var temp = document.getElementById("menu1");
if(!isOpenMenu) temp.style.display = "none";
else if(temp.style.display == "block"){ isOpenMenu = false;}
}
function goToWhere(o){
if(o.className == "dis") return;
document.getElementById("toWhere").innerHTML = o.innerHTML;
document.getElementsByName("where")[0].value = o.getAttribute("toWhere");
}
</script>
</head>
<body>
<form action="" method="get">
<input type="hidden" name="where" value="" />
<ul class="nav">
<li class="navItem">登陆
<li class="navItem"><div style="position:relative; cursor:pointer" onClick="openMenu('menu1')"><span id="toWhere">选择去向</span>
<div class="menu1" id="menu1">
<ul>
<li class="sep"><a class="act" toWhere="0" href="javascript:void(0)" onMouseOver="over(this)" onMouseOut="out(this)" onClick="goToWhere(this)">网易通行证</a>
<li><a class="act" toWhere="1" href="javascript:void(0)" title="@163.com" onMouseOver="over(this)" onMouseOut="out(this)" onClick="goToWhere(this)">163邮箱</a>
<li><a class="dis" toWhere="2" href="javascript:void(0)" title="@126.com" onMouseOver="over(this)" onMouseOut="out(this)" onClick="goToWhere(this)">126邮箱</a>
<li><a class="dis" toWhere="3" href="javascript:void(0)" title="@yeah.com" onMouseOver="over(this)" onMouseOut="out(this)" onClick="goToWhere(this)">Yeah邮箱</a>
<li><a class="dis" toWhere="4" href="javascript:void(0)" title="@188.com" onMouseOver="over(this)" onMouseOut="out(this)" onClick="goToWhere(this)">188财富邮</a>
<li class="sep"><a class="dis" toWhere="5" href="javascript:void(0)" title="@vip.163.com" onMouseOver="over(this)" onMouseOut="out(this)" onClick="goToWhere(this)">vip邮箱</a>
<li><a class="act" toWhere="6" href="javascript:void(0)" onMouseOver="over(this)" onMouseOut="out(this)" onClick="goToWhere(this)">网易博客</a>
<li><a class="act" toWhere="7" href="javascript:void(0)" onMouseOver="over(this)" onMouseOut="out(this)" onClick="goToWhere(this)">网易相册</a>
<li><a class="act" toWhere="8" href="javascript:void(0)" onMouseOver="over(this)" onMouseOut="out(this)" onClick="goToWhere(this)">有道阅读</a>
</ul>
</div>
</div></li>
<li class="navItem">登陆</li>
</ul>
</form>
</body>
</html>
