下拉列表,自己随便做的

原创 15316186307 教程 js 198阅读 2017-11-25 12:16:56 举报

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
window.onload = function () {
var oDiv = document.getElementById("ss");
oUl = document.getElementById("u1");
oImg = document.getElementById("img");
oDiv.onmouseover = function () {
oUl.style.display = "block";
oImg.src="img/sjs.png"
}
oDiv.onmouseout = function () {
oUl.style.display = "none";
oImg.src = "img/sjx.png"
}
}
</script>
<style>

aa{

    width:100%;height:30px;background:#ac9999;
}
div span{
    width:100px;height:30px;margin-left:1200px;line-height:30px;text-align:center;background:#808080;display:block;
}
ul,li{
    margin:0px;padding:0px;
}
li:hover{
    background:#ffd800;
}
ul li {
    list-style: none;line-height:25px;

}
ul {
    background: #b29898;
    width: 100px;
    height: 100px;
    margin-left: 1200px;
    margin-top: 0px;
    text-indent: 15px;
    display: none;
}

img{

    width:20px;position:absolute;top:5px;
}
#ss {
    position: relative;
    width: 100px;
    height: 30px;
}

</style>
</head>
<body>
<div id="aa">
<div id="ss">
<span id="qq">个人中心<img src="img/sjx.png" id="img" /></span>
<ul id="u1">
<li class="jb">登录密码</li>
<li class="jb">登录密码</li>
<li class="jb">登录密码</li>
<li class="jb">登录密码</li>
</ul>
</div>
</div>

</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复