900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html导航栏下拉菜单怎么做 css制作导航栏下拉菜单及问题

html导航栏下拉菜单怎么做 css制作导航栏下拉菜单及问题

时间:2019-08-24 08:21:43

相关推荐

html导航栏下拉菜单怎么做 css制作导航栏下拉菜单及问题

/qegovoxize/1/edit?html,css,output

这个是放在jsbin上的代码。

一、我的思路

CSS制作下拉菜单,主要是运用了样式hover。

原来下拉菜单设置的样式是display:none;当一级菜单hover时,下拉菜单从display:none转变为display:block。

在设置当一级菜单:a标签被hover时,下拉菜单的样式,我的写法是:.nav>ul>a:hover+.pull1{display:block;}。

但是这样设置只能在a标签被hover时才能出现下拉菜单,当鼠标离开a标签时,下拉菜单就会消失。这样不符合下拉菜单的要求。所以我又设置了当下拉菜单被hover时,下拉菜单也会从display:none转变为display:block。我的写法是:.pull1:hover{display:block;}。

二、存在的问题

这样的写法只能勉强实现了下拉菜单的模样,但是存在几个问题。

1、鼠标从a标签移动到下拉菜单时,当鼠标经过一级菜单和二级菜单的空隙之间,下拉菜单会消失。只有当鼠标运动速度足够快的时候,才能实现选择二级菜单的功能。

2、这样的写法无法实现渐变,因为display:none转变到display:block上是不需要时间转变的,这样会不美观。

3、这个写法代码感觉非常冗长,因为一个下拉标签需要分别设置一级标签和下拉标签的hover。这样代码也会非常不美观。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。