下拉菜单的实现

Original 2019-05-12 19:50:08 315
abstract:    在原有的导航栏的代码基础上,需要在一级导航栏中添加二级导航栏,因为一级导航栏中使用的是 a标签,所以在对应要添加二级导航栏的a标签下进行添加li标签以及对应下拉菜单需要添加的内容。   在添加li标签的时候,会出现后面导航跟着下走的清空,首先先隐藏下拉菜单的实现是display中的none属性,然后在父级元素即a标签下添加相对定位的属性,然

    在原有的导航栏的代码基础上,需要在一级导航栏中添加二级导航栏,因为一级导航栏中使用的是 a标签,所以在对应要添加二级导航栏的a标签下进行添加li标签以及对应下拉菜单需要添加的内容。

   在添加li标签的时候,会出现后面导航跟着下走的清空,首先先隐藏下拉菜单的实现是display中的none属性,然后在父级元素即a标签下添加相对定位的属性,然后在ul标签添加绝对定位的属性,实现导航不会跟着移动的效果,把下拉菜单的上边框给去掉,要使用border-top:none属性去实现。

   对于行内元素可以用padding属性设置文字的内边距,然后使用margin属性去实现上下菜单的内容有间隔,可以在文字中添加line-height实现等高,基本的下拉菜单就可以实现了,然后模仿 ,整个导航的下拉菜单就完成了。

Correcting teacher:查无此人Correction time:2019-05-13 09:34:35
Teacher's summary:完成的不错。把常用的css样式,单独提出来,写成公用文件,以后方便使用。继续加油。

Release Notes

Popular Entries