返回下拉菜单的实现...登陆

下拉菜单的实现

LrhYaHa2019-05-12 19:50:08315

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

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

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

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送