css - 无法在 CSS 菜单中控制带有百分比的高度

Question

我创建了一个带有子菜单的 CSS 菜单，使用像素值作为尺寸。现在，我明白了这个想法是多么愚蠢，我尝试使用公式 (size/context) * 100 将所有像素值转换为百分比，以使菜单响应。

原来的版本是这样的:

在将所有内容转换为百分比值之后，我得到了这个: http://jsfiddle.net/5CK9n/

主要是我还是用px来指定nav ul li的高度。每当我尝试以百分比指定高度时，顶部菜单点 (nav ul li) 根本不会改变它们的大小，并且当将鼠标悬停在其中一个上以显示子菜单 (nav ul li ul) 时，顶部菜单点到处都长高了。

谁能告诉我是什么导致了这种行为？

Answer 1

首先，实现这一点的 css 是:

nav > ul > li.hasSubMenu:hover + li {
/* this-> */    margin-left: 25%;   
    }

还有这个:

nav ul li:hover > ul {
        display: block;
        position: relative;
/* and this below */
        top: -100%;
        left: 100%;
    }

删除 top、left 和 margin-left 值。请参阅:jsFiddle .

其次，使用media-queries 使您的导航具有响应性。仅使用百分比是无效的。