关于css3级下拉菜单

Question

本帖最后由 u013538133 于 2014-07-07 16:46:12 编辑

Answer 1

<li id="next2"><a href="1#">所有宝贝</a>
                        <ul>
                            <li><a href="#">按销量</a></li>
                            <li><a href="#">按新品</a></li>
                            <li><a href="#">按价格</a></li>
                        </ul>
                    </li>1. 为什么背景没变。在这一段代码里，子元素的<li> 仍然包含在父元素的<li>的范围之内, 你 hover 子元素，实际仍然还在hover着父元素。
2. 为什么字体颜色变了。<a> 只是一个单独的个体，hover 后颜色变化，离开后颜色恢复原来。
3. 如何得到正确的结果。#next1 li:hover>a{ background:#000;color:#FFF}
其实遵循的原则只有一个，就是<li>hover 时，直接子元素<a>颜色变成白色。
关于相关css解释，可以参照http://www.w3school.com.cn/css/css_selector_child.asp

Answer 2

背景色是#next1 li:hover控制的，因为三级菜单是在二级菜单的li里面，所以hover三级菜单时二级菜单的li还是处于hover状态。
字体颜色是#next1 a:hover控制的，hover时已经转移到三级菜单的a中了。
统一成#next1 a:hover就可以实现鼠标在哪个链接上，那个背景就被成黑色，变成白色。