css - 悬停和高度扩展的奇怪css3错误

Question

我不知道我做错了什么，但显然它不起作用......我想悬停<li id="photo">，然后#sub-menu应该将它的高度从 扩大65px到130px

<div id="nav-wrapper">
        <div id="logo">CAB</div>
        <div class="navigator-line"></div>
        <ul id="nav-bar">
            <li><div class="navigator"></div>ABOUT</li>
            <li><div class="navigator"></div>WEB</li>
            <li><div class="navigator"></div>CORPORATE</li>
            <li id="photo"><div class="navigator"></div>PHOTOGRAPHY</li>
            <li><div class="navigator"></div>CONTACT</li>
        </ul>
    </div>

简单的事情，但它没有运行

http://jsfiddle.net/BrVuG/

知道我做错了什么吗？

Answer 1

问题是#photo:hover #sub-menu- 因为<li>不是子菜单 div 的祖先 .. 并且在当前上下文中#sub-menu，悬停时无法定位，#photo因为它涉及回溯 DOM（目前不支持这样的组合器）。您只能通过定位后代或兄弟姐妹来实现此效果，而不是祖先..如果您使用不同的选择器，您会看到转换发生，例如

#nav-wrapper:hover + #sub-menu

http://jsfiddle.net/BrVuG/2/

但是，在当前情况下，您尝试做的事情是不可能的。

Answer 2

（对 Adrift 所说的内容进行了一些补充……）

如果你真的想用 来做到这一点<li>，你只有两个解决方案：

• 放在#sub-menu里面<li>或之后。很简单。我认为这样做更简单，特别是因为您在#nav-wrapper.
• 使用 javascript（使用鼠标悬停操作<li>将切换 的宽度#sub-menu）。