首页
好吧问答库
>
怎么消除css中的绝对定位重叠问题
怎么消除css中的绝对定位重叠问题
2024年11月23日 11:32
有1个网友回答
网友(1):
首页打开dreamweaver或其它编辑器,创建一个名为nav的导航菜单
栏目一
栏目二
栏目三
栏目四
栏目五
现在为nav添加样式,首先去掉默认的margin和padding,再去掉
< li>标签的list-style样式和
标签的默认下划线。接下来再添加适当的样式(根据实际需要添加)进行美化,如一下样式:
像这样,一个菜单横向菜单就建好了,下面给栏目一,栏目二,栏目三,添加二级下拉菜单
栏目一
二级栏目
二级栏目
二级栏目
二级栏目
栏目二
二级栏目
二级栏目
二级栏目
二级栏目
栏目三
二级栏目
二级栏目
二级栏目
二级栏目
二级栏目
栏目四
栏目五
添加完二级栏目后,现在开始添加css样式,首先给
标签下的
标签添加相对定位,再去除之下
标签的做浮动样式,再适当修改
标签,如一下样式:
.nav ul li ul { position:absolute;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
接下来隐藏掉二级下来菜单,并给它添加鼠标滑动效果,使得当鼠标滑动到主栏目时,二级下来菜单显示,样式如下:
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
至此,横向二级下拉菜单就制作完成了,这里附加上全部代码
相关问答
最新问答
北斗星和新奥拓,哪个好?高手指点!
2020丽江公务员考试公告会在3月初发布吗?
猜字谜(八字)
东莞东坑到南城步行街坐什么车?
监护权和抚养权有什么区别
谐波治理中,电抗器的选择方法,计算方法,具体的计算方法,
想知道大航海时代OL分别多少声望升什么爵位
福州线下活动策划
11月下旬贵州四日游黄果树瀑布群加兴义马岭河大峡谷如何安排!
西游记中的玉帝是谁?他属于道教体系中的神,老子是太上老君显然老子不是在道教中地位最高的?这样说对吗?.