html - 我怎样才能在这些列表项中找到一个 anchor 来填充列表项的空间？

Question

我正在使用一个相当典型的嵌套 UL 设置来创建一个下拉菜单，但是我无法让 li 中的 anchor 链接扩展到它们的高度。

HTML

<div id="navbar-container">
<ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Lessons</a></li>
        <ul>
            <li><a href="#">sub item1sdfsdfsdfsdfsdf</a></li>
            <li><a href="#">sub item2</a></li>
            <li><a href="#">sub item3</a></li> 
        </ul>
    </li>
    <li><a href="#">Custom Fitting</a></li>  
</ul>
</div>

在 CSS 中，我在 anchor 标记上使用 display:block，这确实使它们扩展到 li 的宽度，但不是高度。我试过使用填充，但它不能在所有浏览器中正常工作。 #navbar 使用 display: table 并且子 li 使用 display: table-cell。这样导航栏就可以扩展和收缩以适应屏幕大小。我怀疑 display: table-cell 可能与不垂直扩展的 anchor 有关。

这是一个JSFiddle这样你就可以明白我在说什么了。

CSS

#navbar-container {
min-width: 768px;
height: 32px;
position: relative;
background-color: #bb4212;
}
#navbar {
list-style-type: none;
display: table;
width: 100%;
font : 14px"Arial", sans-serif;
height: 100%;
}
#navbar li {
text-transform:uppercase;
display: table-cell;
text-align: center;
}
#navbar li a {
color: #f2f2f2;
display: block;
border-left: 1px solid #c17455;
}
#navbar > li:first-child a {
border: 0;
}
#navbar li ul {
list-style-type: none;
background-color: #f2f2f2;
position: absolute;
right: -9999px;
top: 32px;
margin-left: 1px;
-moz-box-shadow: 0px 6px 4px 0px #898989;
-webkit-box-shadow: 0px 6px 4px 0px #898989;
box-shadow: 0px 6px 4px 0px #898989;
}
#navbar li ul li:hover {
background-color: #bb4212;
}
#navbar li ul a:hover {
color: #f2f2f2;
}
#navbar li:hover {
background-color: #f2f2f2;
}
#navbar li:hover a {
color: #000;
}
#navbar li:hover ul {
right: auto;
}
#navbar li ul li {
display: block;
text-align: left;
}
#navbar li ul li a {
border: 0;
white-space:nowrap;
margin: 0 5px;
text-decoration: none;
display: block;
}

Answer 1

我最喜欢的填充父容器 100% 宽度和高度的技术是使用绝对定位:

parent {
    position: relative; /* unless it's already positioned */
}

child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

此处它应用于您的 JSFiddle:http://jsfiddle.net/Kgz5p/