HTML：

<div id="menu">
    <ul>
        <li class="item1"><span>Home</span><div></div>
        </li
        ><li class="item2"><span>About</span><div></div>

        </li
        ><li class="item3"><span>Games</span><div></div>

        </li
        ><li class="item4"><span>Data</span><div></div>

        </li
        ><li class="item5"><span>Films</span><div></div>

        </li
        ><li class="item6"><span>Contact</span><div></div>

        </li>
    </ul>
</div>

CSS：

#menu {
    margin-top: 60px;
    text-align: center;
    height: 200px;
    min-width: 975px;
    position: relative;
}
ul {
    position: absolute;
    top: 0;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    color: #fff;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 30px;
}
li {
    width: 150px;
    height: 160px;
    display: inline-block;
    transition:height 1s;
}
li:hover {
    height: 190px;
    cursor: pointer;
}
li span {
}
a {
    display:block;
}
.item1 {
    background: #00CC99;
}
.item1 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/HOME.png) no-repeat bottom;
}
.item2 {
    background: #006699;
}
.item2 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/BOOK.png) no-repeat bottom;
}
.item3 {
    background: #0066CC;
}
.item3 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/COUNTERSTRIKE.png) no-repeat bottom;
}
.item4 {
    background: #0066FF;
}
.item4 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/NETWORK%20-%20HDD.png) no-repeat bottom;
}
.item5 {
    background: #6666FF;
}
.item5 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/FILE%20-%20MOVIE.png) no-repeat bottom;
}
.item6 {
    background: #CC33FF;
}
.item6 div {
    width: 100%;
    height: 80%;
    background: url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/PHONE.png) no-repeat bottom;
}

很抱歉包含大量的CSS，但我发现我尝试过的各种方法往往会破坏各种不同的东西。

DEMO HERE

我试过的东西：

我尝试将a置于height: 100%; width: 100%;内并使用z-index将其置于顶部然后隐藏它但这似乎不起作用。

在每个a周围播放<li>，因为我不知道它会如何反应，这似乎也失败了。如果我得到“display：block;”它可以工作，但会把菜单弄糟。

Answer 1

所以你试图建立每个街区的链接？为什么不把代表块的东西放到锚中呢？

<div id="menu">
    <ul>
        <li class="item1">
            <a href="test">
                <span>Home</span>
                <div></div>
            </a>
            ...

您只需将锚点的高度设置为100％：

#menu a
{
    height: 100%;
    text-decoration: none;
    color: white;
}

jsFiddle

请注意，我只使用主页按钮

执行此操作

Answer 2

如果你的代码没有任何其他计划，你可以摆脱那些空的div。为了使html结构保持正确和有效，a元素应该放在li内，而不是在外面。然后将html更改为：

<li class="item1"><a><span>Home</span></a>

和CSS：

.item1 {
background: #00CC99 url(https://cdn1.iconfinder.com/data/icons/ecqlipse2/HOME.png) no-repeat bottom;
}

应该在不破坏你的设计的情况下解决它。

演示（仅限li} http://jsfiddle.net/Xf96N/

将整个<li>转变为链接</li>

HTML：

CSS：

2 个答案:

jsFiddle