html - 拉伸(stretch) 以填充菜单中的

Question

遇到了一些麻烦...知道如何拉伸(stretch)我的 <a>填写<li>他们坐在里面吗？

我正在努力使链接更易于点击。

这是我的 jsFiddle:http://jsfiddle.net/T9nkf/

<nav class="main-nav">
    <ul>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

最明智的做法是让它们(a 的)display: block，但它们仍然不会填满您的整个 li，因为 li 包含填充。从 li 中删除填充。只在需要时给它们一个大小，并将所有其他标记(尤其是填充)应用到 a 元素本身。