多级下拉菜单导航制作

水平导航菜单的制作思路:

1、进行初始化的设置,将文档中所有元素的margin和padding设为0;

2、将所有的a元素设置为块元素,去掉下划线,添加背景色#c和padding值;

3、鼠标移入li时改变子元素a的背景色,此处应为 li:hover>a (意思为鼠标划过li时,其直属的子元素背景色改变#d,如果不加>,那么所有二级菜单极其子菜单的背景色#c将变为#d);

4、将导航菜单整体的ul左浮,去掉列表项符号;

5、将li左浮,设置相对定位;

6、设置下拉容器隐藏,绝对定位,设置最小宽度;

7、鼠标移入li时显示当前li的子下拉容器  此处语句为li:hover>ul(如果不加>,那么当鼠标划过第一级子菜单时,第二级第三集及以下的菜单容器都会显示出来,>强调父子元素的关系,一定是划过父元素时,其子元素才会有所动作)

8、设置从二级菜单起的ul位置,top 和left的设置(如果让子菜单刚好在父菜单正下方,设置top为0,left为0,如果让其子菜单在父菜单右侧,那么设置top为0,left为100%,意为挨着紧父菜单右侧)

两种思路:
  • 所有li左浮,然后设置第一级li为relative,下拉ul为absolute,那么下拉菜单将会在上一级菜单正下方
  • 只设置上一级li左浮,那么下拉菜单将会在上一级菜单正下方
垂直导航菜单的制作思路(子菜单在侧边显示):


1、初始化设置

2、设置最外层ul的宽度和高度  margin值

3、设置所有ul的list类型为none

4、设置li的位置属性为relative,背景色

5、设置所有的a为块元素,对其文字格式进行设置,text-decoration、font-size、color、font-weight、text-align、line-height

6、设置滑动li时子元素a背景色的变换  li:hover>a

7、设置子级ul位置属性为absolute,显示方式为none,并设置其top为0,left为100%

8、设置当划过第一级li时,二级ul以块元素显示出来




竖直导航菜单(子菜单也是竖直导航)

1、初始化设置

2、设置最外层ul的宽度和高度  margin值

3、设置所有ul的list类型为none

4、设置第一级li的位置为relative,背景色

5、设置所有的a为块元素,对其文字格式进行设置,text-decoration、font-size、color、font-weight、text-align、line-height

6、设置滑动li时子元素a背景色的变换  li:hover>a

7、设置二级ul位置为relative,显示方式为none

8、设置当划过第一级li时,二级ul以块元素显示出来



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值