在原有的导航栏的代码基础上,需要在一级导航栏中添加二级导航栏,因为一级导航栏中使用的是 a标签,所以在对应要添加二级导航栏的a标签下进行添加li标签以及对应下拉菜单需要添加的内容。
在添加li标签的时候,会出现后面导航跟着下走的清空,首先先隐藏下拉菜单的实现是display中的none属性,然后在父级元素即a标签下添加相对定位的属性,然后在ul标签添加绝对定位的属性,实现导航不会跟着移动的效果,把下拉菜单的上边框给去掉,要使用border-top:none属性去实现。
对于行内元素可以用padding属性设置文字的内边距,然后使用margin属性去实现上下菜单的内容有间隔,可以在文字中添加line-height实现等高,基本的下拉菜单就可以实现了,然后模仿 ,整个导航的下拉菜单就完成了。