html5--6-60 阶段练习7-下拉菜单

最新推荐文章于 2023-02-04 09:12:14 发布

weixin_33725722

最新推荐文章于 2023-02-04 09:12:14 发布

阅读量107

点赞数

html5--6-60 阶段练习7-下拉菜单

学习要点

综合运用所学过的知识完成一个下拉菜单的小练习，加深对学过知识点的综合应用能力。

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>下拉菜单</title>
 6     <link rel="stylesheet" type="text/css" href="but.css">
 7 </head>
 8 <body>
 9 <body>
10     <nav>
11         <ul class="ul1">
12             <li>
13                 <a href="">首页</a>
14                 <ul class="ul2">
15                     <li><a href="">新闻</a></li>
16                     <li><a href="">科技</a></li>
17                     <li><a href="">财经</a></li>
18                     <li><a href="">读书</a></li>
19                 </ul>
20             </li>
21             <li>
22                 <a href="">首页</a>
23                 <ul class="ul2">
24                     <li><a href="">新闻</a></li>
25                     <li><a href="">科技</a></li>
26                     <li><a href="">财经</a></li>
27                     <li><a href="">读书</a></li>
28                 </ul>
29             </li>
30             <li>
31                 <a href="">首页</a>
32                 <ul class="ul2">
33                     <li><a href="">新闻</a></li>
34                     <li><a href="">科技</a></li>
35                     <li><a href="">财经</a></li>
36                     <li><a href="">读书</a></li>
37                 </ul>
38             </li>
39 <!--             <li><a href="">新闻</a></li>
40             <li>
41                 <a href="">科技</a>
42                 <ul>
43                     <li><a href="">IT</a></li>
44                     <li><a href="">创投</a></li>
45                     <li>
46                         <a href="">探索</a>
47                         <ul>
48                             <li><a href="">航天</a>
49                                 <ul>
50                                     <li><a href="">技术前沿</a></li>
51                                     <li><a href="">理论研究</a></li>
52                                 </ul>
53                             </li>
54                             <li><a href="">考古</a></li>
55                             <li><a href="">医学</a></li>
56                         </ul>
57                     </li>
58                 </ul>
59             </li>
60             <li><a href="">财经</a></li>
61             <li><a href="">读书</a></li> -->
62         </ul>
63     </nav>
64 </body>
65 </body>
66 </html>

 1 @charset="UTF-8";
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 .ul1{
 7     margin:50px;
 8 }
 9 
10 ul{
11     list-style-type: none;
12 }
13 a{
14     text-decoration: none;
15 }
16 
17 .ul1>li{
18     width: 150px;
19     height: 2em;
20     text-align: center;
21     background: rgba(30,80,200,0.8);
22     border-radius: 0.5em 0.5em 0 0  ;
23     font-size: 20px;
24     line-height: 2em;
25     float: left;
26     margin-left: 1px;
27 }
28 
29 .ul2{
30     background: rgba(80,80,160,0.6);
31     border-radius: 0 0  0.5em 0.5em;
32     display: none;    
33 }
34 
35 .ul2>li>a:hover{
36     background: rgba(40,180,40,0.8); 
37     width: 85%;
38     height: 1.5em;
39     line-height: 1.5em;
40     display: inline-block;
41     border-radius: 0.5em;
42     font-weight: bold;
43     padding: 3px 3px;
44 
45 }
46 
47 .ul1>li:hover{
48     background:rgba(30,80,250,0.8); 
49 }
50 .ul1>li:hover>ul{
51     display: block;
52 }