HTML网页怎样制作二级下拉菜单,二级滑动菜单。

HTML网页怎样制作二级下拉菜单,二级滑动菜单,看一下怎么操作吧。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

材料/工具

电脑

方法

如图所示,二级下拉菜单一般都是这样来制作的,就是在li标签里面再放一个ul标签。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

就会有这样的效果了。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

先把二级下拉菜单之间的margin和padding值去掉。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

设置div>ul>li,需要注意的是,>是子代选择器。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

浮动后就成了,距离二级菜单不远了。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

在设置去掉所有li的圆点符号,并且给宽高,居中以及背景色。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

如图,这个二级菜单还算过得去,如果不喜欢可以换颜色。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

把下面部分的菜单隐藏起来,如图,用到空格隔开,注意,空格表示后代选择器。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

下面的下拉菜单就看不见了。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

用jq来操作鼠标经过的时候,显示菜单即可。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

如图用到了滑动效果。

HTML网页怎样制作二级下拉菜单,二级滑动菜单。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 951076433@qq.com 举报,一经查实,本站将立刻删除。如若转载,请注明出处:https://www.xiaomafuwu.com/333188.html

(0)
代码小二的头像代码小二

相关推荐