Question

CSS 二级导航 问题

如图。当鼠标经过的时候，会出现下面红色的二级菜单。
原理是怎样的？我用纯CSS实现不了。。求详细解说下

Answer 1

目录的页面结构简单来做就是嵌套列表
样式方面是通过hover伪类来附加交互效果，如：li:hover ul{display: block;}

追问

这个能实现。但是没法对其。是列竖起的了。能详细给个思路吗

追答

ul做横向菜的会的吧，
li里面嵌套ul也没问题吧，
1级菜单怎么横的，2级也一样，

给嵌套的2级ul定位也没问题吧。

下面开始：
把嵌套的ul的display给none，二级菜单就没了。
然后用上面那个之类的选择器，二级菜单就会再显示出来了。

追问

就是2级 ul 定位有问题。
就如上图，
第一排设宽度1000px
第二排嵌套在第一个的li里，是display:none了。但是好像要改变第一排的定义

追答

好吧……
一级的 li 的 position 设为 relative，
二级的 ul 的 position 设为 absolute

最好仔细看一下CSS标准关于position这一块

Answer 2

这个大部分是js来控制的，添加onMouseover事件控制二级菜单的显示！

Answer 3

还得需要js效果吧，纯js实现不了的

Answer 4

li:hover{}用这个方法试一下

Answer 5

纯css太老套了 代码繁琐！