多级菜单制作总结

yujide 发布于 2016/05/17 08:03
阅读 214
收藏 3

在制作多级菜单的过程中,遇到了一些问题,花费了几天的时间才解决,途中几乎都想放弃自学了,但是还是坚持下来了。希望我的经历能帮助到自学的大家;如有前辈指教的话就更好了!

 

1:效果图:

 

2.思路:

1.一级菜单 用ul

2.二级菜单放 一级菜单的li中;

3.二级菜单用div包裹使用5dl;

4.三级菜单放二级菜单的dd 中;

5.三级菜单同样使用dl

 

3.碰到的问题:

1.二级和三级菜单会把下面的内容(图片展示区)挤到下面去;

2.使用JQureyhover时候,只要移开一级菜单(全部商品分类)二级菜单就会消   失;

 

4.解决方法:

1.使用绝对定位,让二级和三级脱落文档流,就不会影响下面的内容(图片展示区);

2.

A)当出现这个问题的第一反应就是给二级父元素加相对定位,我考虑的是绝对定位可能已经不在li的包裹里了。但是还是不行!!!!!!!

B)我又考虑是不是给li设置了高度导致鼠标选不到二级菜单?我又把li的高给去了还是不行!!!!!!

C)度娘了N久,总于发现一篇文章说的是postion会导致z-index默认为0

一般的都默认为1;顿时醒悟!!!!原来是被图片导航给盖住了。。。。。。SO 给二级 菜单添加z-index2;然后就行了!!!!

 

 

 

大概是自己的基础不稳,决定去买本CSS权威来看看。!!!!!

 

以后会继续总结谢谢大家!

 

 

2016.5.16  坚持的余

加载中
0
anap
anap
我也不太会前端,加油 
yujide
yujide
谢谢,一起加油
返回顶部
顶部