为了账号安全,请及时绑定邮箱和手机立即绑定

自学中多级菜单制作步骤

标签:
Html/CSS JQuery

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

1:效果图:图片描述
2.思路:
1.一级菜单 用ul ;
2.二级菜单放 一级菜单的li中;
3.二级菜单用div包裹使用5个 dl;
4.三级菜单放二级菜单的dd 中;
5.三级菜单同样使用dl;

3.碰到的问题:
1.二级和三级菜单会把下面的内容(图片展示区)挤到下面去;
2.使用JQurey的hover时候,只要移开一级菜单(全部商品分类)二级菜单就会消 失;

4.解决方法:
1.使用绝对定位,让二级和三级脱落文档流,就不会影响下面的内容(图片展示区);
2.
A)当出现这个问题的第一反应就是给二级父元素加相对定位,我考虑的是绝对定位可能已经不在li的包裹里了。但是还是不行!!!!!!!
B)我又考虑是不是给li设置了高度导致鼠标选不到二级菜单?我又把li的高给去了还是不行!!!!!!
C)度娘了N久,总于发现一篇文章说的是postion会导致z-index默认为0;
一般的都默认为1;顿时醒悟!!!!原来是被图片导航给盖住了。。。。。。SO 给二级 菜单添加z-index:2;然后就行了!!!!

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

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

2016.5.16 坚持的余

点击查看更多内容
15人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
42

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消