预期效果展示：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <title></title>
6 <style type="text/css">
7 *{
8 margin: 0px;
9 padding: 0px;
10 }
11 .li1{
12 list-style: none;
13 float: left;
14 margin-left: 15px;
15
16 width: 100px;
17 height: 30px;
18 text-align: center;
19 line-height: 30px;
20 /*鼠标悬浮元素之上时鼠标的形状变成手抓的形状*/
21 cursor: pointer;
22 /*制作过渡效果*/
23 -webkit-transition:all 1s;
24 font-weight: bolder;
25 }
26 .li1:hover{
27 color: white;
28 /*当改变北背景的颜色时，文字的颜色也会改变，所用采用rgb的方式，那样文字的颜色不会改变 rgba中的a是透明度*/
29 background-color:rgba(0,0,0,0.7);
30 }
31 .li1:hover li{
32 height: 30px;
33 }
34 .li1 li{
35 list-style: none;
36 background-color: black;
37 color: white;
38 font-size: 12px;
39
40 /*颜色不显示时height：0会文字溢出 所以要隐藏溢出 overflow: hidden; */
41 height: 0px;
42 overflow: hidden;
43
44 /*制作过渡效果*/
45 -webkit-transition: all 1s;
46 }
47
48
49 </style>
50 </head>
51 <body>
52 <ul>
53 <li class="li1">走进徐工
54 <ul>
55 <li>了解徐工</li>
56 <li>全球徐工</li>
57 <li>企业文化</li>
58 </ul>
59 </li>
60 <li class="li1">实力徐工
61 <ul>
62 <li>品质徐工</li>
63 <li>创新徐工</li>
64 <li>高效徐工</li>
65 </ul>
66 </li>
67 <li class="li1">媒体聚焦
68 <ul>
69 <li>徐工新闻</li>
70 <li>媒体视点</li>
71 <li>聚焦媒体</li>
72 </ul>
73 </li>
74 <li class="li1">工作机会
75 <ul>
76 <li>加入徐工</li>
77 <li>发展平台</li>
78 </ul>
79 </li>
80 <li class="li1">互动专区
81 <ul>
82 <li>品牌活动</li>
83 <li>服务活动</li>
84 </ul>
85 </li>
86 <li class="li1">徐工商城</li>
87 </ul>
88 </body>
89 </html>
时间： 2024-11-03 22:10:01