1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>制作当当网顶部导航</title>
6 <style type="text/css">
7 a {
8 padding-bottom: 10px;
9 }
10
11 .one {
12 margin-bottom: 7px;
13 padding-left: 5px;
14 }
15
16 * {
17 padding: 0px;
18 margin: 0px;
19 }
20
21 li {
22 list-style: none;
23 padding: 5px 0px 7px 5px;
24 }
25
26 a {
27 text-decoration: none;
28 color: gray;
29 }
30
31 ul {
32 display: none;
33 }
34 </style>
35 <script src="../../js/jquery-3.4.1.js"></script>
36 </head>
37 <body>
38 <div class="title">
39 <div class="one"><a href="#">我的当当</a>
40 <div class="two">
41 <ul>
42 <li ><a href="#" class="a">我的订单</a></li>
43 <li ><a href="#" class="a">我的收藏</a></li>
44 <li ><a href="#" class="a">我的收品卡</a></li>
45 <li ><a href="#" class="a">我的积分</a></li>
46 <li ><a href="#" class="a">我的兑换</a></li>
47 </ul>
48 </div>
49 </div>
50 </div>
51
52 <script type="text/javascript">
53 $(document).ready(function () {
54 $(".one").mouseover(function () {
55 $(this).css({"border": "1px solid #ee7304", "width": "88px", "height": "200px"});
56 $("ul").show();
57 $(".a").mouseover(function () {
58 $(this).css("color","blue");
59 }).mouseout(function () {
60 $(this).css("color","gray");
61 })
62 }).mouseout(function () {
63 $(this).css("border", "none");
64 $("ul").hide();
65
66 })
67 })
68 </script>
69 </body>
70 </html>
