老师我的代码如何实现慕课网首页二级导航弹出的样式

老师我的代码如何实现慕课网首页二级导航弹出的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin: 0px; padding: 0px;}
    ul li{list-style-type: none;}
    .one{
      width: 160px;
      height: auto;
      background: #333333;
      text-align: center;
      line-height: 40px;
      color: #fff;
      border: 1px solid #fff;
      cursor: pointer;
    }
    .one .one-list:hover .two{display: block;}
    .two{
      width: 160px;
      height: auto;
      line-height: 40px;
      display: none;
      background: #fff;
      color: #000;
    }
 
    .two li{
       border-bottom:1px dashed gray;
       height: 40px;
    }
 
    .two .two-list:hover .three{display: inline-block;}
    .three{
      width: 1160px;
      height: auto;
      background: #333;
      color: #fff;
      border-bottom: 1px solid gray;
       display: none;
       position: relative;
       left: 160px;
       top: -40px;
       float: left;
    }
 
 
  </style>
</head>
<body>
  <div class="container">
   <ul class="one">
     <li class="one-list">
     一级栏目
     <ul class="two">
       <li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li>
<li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li><li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li><li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li>
     
     </ul>  <!-- 二级结束 -->
   </li>  <!-- 一级-二级-三级 -->
 
 
 
 
 
 
 
      <li class="one-list">
     一级栏目
     <ul class="two">
       <li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li>
<li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li><li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li><li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li>
     
     </ul>  <!-- 二级结束 -->
   </li>  <!-- 一级-二级-三级 -->
 
 
 
 
 
 
 
 
 
 
      <li class="one-list">
     一级栏目
     <ul class="two">
       <li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li>
<li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li><li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li><li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li>
     
     </ul>  <!-- 二级结束 -->
   </li>  <!-- 一级-二级-三级 -->
 
 
 
 
 
 
 
 
 
 
 
 
      <li class="one-list">
     一级栏目
     <ul class="two">
       <li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li>
<li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li><li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li><li class="two-list">
       二级栏目
       <ul class="three">
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
         <li>三级栏目</li>
       </ul>
     </li>
     
     </ul>  <!-- 二级结束 -->
   </li>  <!-- 一级-二级-三级 -->
       
     </ul>  <!-- 一级导航结束 -->
 
  </div>   <!-- div结束 -->
</body>
</html>

http://img1.sycdn.imooc.com//climg/5d01f20f0001f0f608020360.jpg

http://img1.sycdn.imooc.com//climg/5d01f20f0001700e13650532.jpg


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕慕子 2019-06-14 16:03:01

同学你好, 慕课网首页的效果只有二级菜单, 你的代码结构是三级菜单,所以无法实现跟慕课网首页一模一样的效果的, 同学你的实现思路是对的, 鼠标移入让对应的菜单显示。

  1. 可以修改代码,让鼠标移入一级菜单, 同时让二级和三级菜单都显示

    http://img1.sycdn.imooc.com//climg/5d0354320001f75307640816.jpg

  2. 可以参考老师上次给你的代码,让鼠标先移入一级菜单显示对应的二级菜单, 然后鼠标移入二级菜单显示与之对应的三级菜单

  3. 同学可以尝试将你的代码结构设置为二级菜单,实现鼠标移入一级菜单显示对应的二级菜单效果

  4. 在后面的阶段的课程中, 我们也会学习使用js实现类似慕课网首页二级菜单的效果,同学不要着急, 可以先掌握思想,打好基础哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~


好帮手慕慕子 2019-06-14 11:41:02

同学你好,你这的意思是想要三级分类的大小位置不变, 鼠标移入二级菜单只改变三级菜单里面的内容吗?如果是指这里的话那么就可以给最外层的ul设置相对定位, 然后给三级菜单设置绝对定位, 调整top值, 让三级菜单参照相同的先辈元素进行定位。 示例:

http://img1.sycdn.imooc.com//climg/5d0317020001f2d105190392.jpg

http://img1.sycdn.imooc.com//climg/5d0352290001fcab05600383.jpg

效果图:

http://img1.sycdn.imooc.com//climg/5d0317260001214514020356.jpg

如果不是指这里的话,建议:可以详细的描述指的是哪里,再次提问, 我们会继续为你解答的

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~


  • 提问者 无根鸟飞呀飞 #1
    老师我想要的就是咱们现在网友首页二级导航的样子,我的代码是三级导航实现这样的效果
    2019-06-14 14:30:58
  • 提问者 无根鸟飞呀飞 #2
    老师我想要的就是咱们现在网友首页二级导航的样子,我的代码是三级导航实现这样的效果
    2019-06-14 14:31:03
好帮手慕夭夭 2019-06-13 16:07:33

你好同学,从你的截图中看不到样式效果,老师也没有找到截图的地方哦。请同学具体描述一下,以便老师为你解答。

祝学习愉快 ,望采纳。

  • 提问者 无根鸟飞呀飞 #1
    老是您就复制我代码运行一下,看下我的三级分类。我想要的三级分类效果就是现在慕课网首页导航处的弹出的效果,我试了几次也不成功,不知道怎么弄了
    2019-06-13 20:28:17
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码