JavaScript语言基础-下拉框

来源：互联网发布：网络体彩编辑：程序博客网时间：2024/06/01 23:03
运行效果
这里写图片描述
<!doctype html><html><head><meta charset="utf-8" /><title></title></head><style>body,ul,p,dl,dt,dd,h1,table,tr,th,h2,li{    margin:0;    padding:0;    list-style:none;    outline:none;    border:0;}body{    color:#6c6c6c;    font-size:12px;    font-family:"微软雅黑";}a:link,a:visited{    text-decoration:none;    color:#6c6c6c;}a:hover{    text-decoration:none;}#top_bg{    width:100%;    height:30px;    background:#F7F7F7;}#top{    width:980px;    height:30px;    line-height:30px;    margin:0 auto;}.left{    float:left;}.right{    float:right;}#top li{    float:left;    padding:0px 10px 0px 0px;}#top .line{    color:#CCC;}.right li{    cursor:pointer;    border:1px solid #f7f7f7;}.right li span{    padding:0px 9px;}.right .list{    position:relative;}.right #list_cur{    width:95px;    display:none;    position:absolute;    left:-1px;    top:30px;    background-color:#FFF;    border:1px solid #EEE;  }.right #list_cur a{    display:block;    padding:0 10px;    line-height:28px;    color:#6C6C6C;}.right #list_cur a:hover{    background:#F5F5F5;}</style><script type="text/javascript">function change(myid,mode){    document.getElementById(myid).style.display=mode;    if(mode=='block'){        document.getElementById("list").style.backgroundColor="#fff";        document.getElementById(myid).style.border="1px solid #eee";        document.getElementById(myid).style.borderTop="none";           document.getElementById(myid).parentNode.Style.backgroundColor="#fff";        document.getElementById(myid).parentNode.Style.border="1px solid #eee";        document.getElementById(myid).parentNode.Style.borderBottom="none";    }else{        document.getElementById("list").style.backgroundColor="";        document.getElementById(myid).parentNode.Style.backgroundColor="";        document.getElementById(myid).parentNode.Style.border="";    }}</script><body onload="changeColor()">    <div id="top_bg">        <div id="top">            <ul class="left">                <li><a href="#">登录</a></li>                <li><a href="#">免费注册</a></li>            </ul>            <ul class="right">                <li class="list" id="list" onmouseover="change('list_cur','block')" onmouseout="change('list_cur','none')">                <span>个人中心</span>                <div id="list_cur">                    <a href="#">已完成订单</a>                    <a href="#">未完成订单</a>                    <a href="#">我的保险</a>                    <a href="#">账户安全</a>                    <a href="#">个人信息</a>                    <a href="#">常用联系人</a>                </div>                </li>                <li class="line">|</li>                <li><span>使用须知</span></li>                <li class="line">|</li>                <li><span>收藏夹</span></li>                <li class="line">|</li>                <li><span>货物快运</span></li>                <li class="line">|</li>                <li><span>联系我们</span></li>            </ul>        </div>    </div></body></html>
阅读全文
0 0