html - 将鼠标悬停在链接上时如何突出显示整个单元格

Question

我有一个水平导航栏，当我将鼠标悬停在链接上时，我想突出显示链接所在的整个单元格，但是，我只能突出显示文本周围的直接区域。我将不胜感激关于如何实现这一目标的任何指示。

这是我的 JS Fiddle:http://jsfiddle.net/PYKXb/1/

这是我的 CSS 代码:

#horizontal-style {
    display: table;
    width: 100%;
    margin:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:0px;
}

#horizontal-style li {
    display: table-cell;
    vertical-align:middle;
    height:auto;
    padding:1%;
}

#horizontal-style a:link {
    display: block;
    border: none;
    text-align: center;
    margin:auto;
    padding:none;
    background:#ebebec;
    color:#005da4;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:90%;
    display:inline-block;
    vertical-align:middle;
}

#horizontal-style a:visited {
    display: block;
    border: none;
    text-align: center;
    margin:auto ;
    padding:none;
    background: #ebebec;
    color:#005da4;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:90%;
    display:inline-block;
    vertical-align:middle;
}

#horizontal-style a:hover {
    display: block;
    border: none;
    text-align: center;
    margin:auto ;
    padding:none;
    background: #acce39;
    color:#005da4;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:90%;
    display:inline-block;
    vertical-align:middle;
}

#horizontal-style a:hover {
    display: block;
    border: none;
    text-align: center;
    margin:auto ;
    padding:none;
    background: #acce39;
    color:#005da4;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:90%;
    display:inline-block;
    vertical-align:middle;
}

这是我的 HTML 代码:

<ul id="horizontal-style">
    <li><a href=# >Home</a></li>
    <li><a href=# >About Us</a></li>
    <li><a href=# >Online<br />Courses</a></li>
    <li><a href=# >Registration</a></li>
    <li><a href=# >Faculty</a></li>
    <li><a href=# >Calendar</a></li>
    <li><a href=# >Store</a></li>
    <li><a href=# >Testimonials</a></li>
    <li><a href=# >Online<br/>Lectures</a></li>
    <li><a href=# >Contact Us</a></li>
    <li><a href=# >Forum</a></li>
</ul>

Answer 1

这个很好用，看看here

#horizontal-style li {
    display: table-cell;
    vertical-align:middle;
    height:auto;
    padding:1%;
    background:#ebebec;
}
#horizontal-style li:hover{
    background-color:#acce39;
}