二级导航菜单使用方法以及常见问题

二级导航菜单

使用css的diaplay属性设置二级菜单的显示情况。

具体思路如下：

1.先制作静态的一级菜单和二级菜单，最好使用ul和li元素,以及a标签和float属性，还有要把二级菜单的位置定好，最好使用绝对定位，不占位置。（） 2.第二步，制作二级菜单不显示。通过设置css样式,使用diaplay:none;就可以实现了。 3.第三步，显示二级菜单，可以通过设置css样式,a标签的伪类选择器(a:hover)实现。

注意的问题: 我在头一次用这个方法时,定位使用了相对定位,导致在显示二级菜单是，二级菜单的位置会占用了一级菜单的位置。后来花了好多时间才发现是定位的问题。

我分析了一下，会出现"占位置"这个bug,是由于我对定位知识点不够熟练,没有意识到,使用相对定位时,元素会占有原来的位置。而使用绝对定位，刚好可以解决这个问题。

另外，在写二级菜单还会遇到以下问题：

1.要使子菜单的所有元素在一行显示 解决办法:直接把子菜单的菜单列的显示方式设置为"inline-block"。

2.二级菜单被页面或者其他内容遮盖 解决办法:需要在顶层同级父元素设置"position:relative;",以及z-index。