jQuery - 当当网我的订单页

时间：2022-07-26 21:16:16
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>当当网我的订单页</title>

    <link type="text/css" rel="stylesheet" href="css/dangdang.css">

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#menu-ul").hide();

            $("a").eq(0).mouseover(function(){

                $("#menu-ul").show().css("border","1px solid #ee7304");

            }).mouseout(function(){

                $("#menu-ul").hide().css("border","none");

            })

        })

    </script>

</head>

<body>

<div id="menu" class="pos">

    <a href="#">我的当当</a>

    <ul id="menu-ul">

        <li><a href="#">我的订单</a></li>

        <li><a href="#">我的收藏</a></li>

        <li><a href="#">我的礼品卡</a></li>

        <li><a href="#">我的积分</a></li>

        <li><a href="#">我的余额</a></li>

    </ul>

</div>

</body>

</html>

dangdang.html

*{

    margin:0px;

    padding:0px;

    font-size:12px;

}

a{

    color:#999;

    text-decoration:none;

}

body{

    background:#fff url(../images/bg.jpg) no-repeat;

}

ul{

    list-style:none;

}

.pos{

    position:absolute;

}

#menu{

    left:590px;

    top:5px;

}

#menu li{

    display:block;

    height:20px;

    line-height:20px;

    background-color:#fff;

    padding:4px;

}

dangdang.css

相关文章