菜单内联菜单向左浮动，宽度和高度为纯 CSS 上的 %

Question

#headermenu ul li {
    width:195px;
    height:45px;
    float:left;
    left:0;
    text-decoration:none;
    text-align:center;
    font-family:century gothic;
    background-color:#fef3e2;
}

这是我的 li css 我一直试图将宽度和高度设置为某个百分比，但显然它不起作用..我的问题是，有没有办法或者是否可以将这个宽度和高度设置为我不知道的百分比想在这里使用表格，因为如果我在菜单中悬停时执行子菜单将被扭曲，这意味着它们将并排而不是彼此重叠（我希望它们彼此重叠）..任何想法都值得赞赏..

更新：

http://jsfiddle.net/guradio/gvmRX/

在这个 fidde 中，您可以看到我将 li 大小更改为 100 以使其适合，这就是为什么我想尽可能将其设置为百分比宽度以避免过大的宽度

Answer 1

为了能够以百分比形式提供height 和width，您需要向父级提供width 和height。

HTML：

<ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

CSS：

ul li {
    width: 33%;
    height: 33%;
    float:left;
    left:0;
    text-decoration:none;
    text-align:center;
    font-family:century gothic;
    background-color:#fef3e2;
}

在这个演示中，我们有<li>，您可以看到它使用百分比宽度，因为父元素已经设置了宽度（<ul> 是块元素）但高度尚未设置，因此百分比高度它不起作用。

Demo Here

现在让我们设置父母的身高，看看它是否有任何改变。

添加的 CSS：

html, body {
    height: 100%;
}

ul {
    height: 100%;
}

所以这里我们将html, body 的高度设置为使用100%，然后还需要设置<li> 的父级（同样<ul> 是一个块元素，所以它没有设置高度）。这允许我们使用百分比作为高度。

Demo Here

有任何问题都可以告诉我。