悬停和高度扩展的奇怪css3错误答案

【问题标题】：strange css3 error with hover and height expanding悬停和高度扩展的奇怪css3错误
【发布时间】：2013-04-02 12:36:29
【问题描述】：

我不知道我做错了什么，但显然它不起作用...我想悬停<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/

知道我做错了什么吗？

【问题讨论】：

标签： css hover height transition expand

【解决方案1】：

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

#nav-wrapper:hover + #sub-menu

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

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

【讨论】：

【解决方案2】：

（对 Adrift 所说的补充一点......）

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

将#sub-menu 放在<li> 内部或之后。很简单。我认为这样做更简单，尤其是因为您在#nav-wrapper 上具有固定的位置和宽度。
使用 javascript（在<li> 上使用鼠标悬停操作将切换#sub-menu 的宽度）。

【讨论】：

啊！现在我明白了这个问题。位置是固定的，所以我不能自己向下移动内容，但为什么我不能移动带有边距或填充的#main-wrapper？因为漂流说同样的话？而且我的 js 很糟糕，我不知道该怎么做... :(
@MarieVondePalme 抱歉这么晚了......是的，这是 Adrift 所说的。您只能使用 CSS 选择器定位兄弟元素或子元素。这意味着只有当#nav-wrapper 位于#nav-bar 或上述<li> 内时，您才能使用<li> 做您想做的事情......这应该在这里做。它与固定的位置无关。我的意思是，既然你有一个固定的位置，你把它放在哪里，它总是在页面上的同一个地方。所以你可以完全移动它，这样你就可以用<li>上的:hover定位它，而不会影响它的位置。