Question

我的网站上有一个使用

的菜单

在加载时，背景为红色。在元素悬停时，它会变为橙色阴影，但只有一小部分是橙色。如何在悬停时让整个<li>突出显示橙色？

HTML：

<nav class="site-nav">
    <ul>
        <li class=""> <a href="index.html" title="home"><span class="icon-home"></span></a>

        </li>
        <li> <a>Contact Us</a>

        </li>
        <li> <a>My Products</a>

        </li>
        <li> <a>Our Locations</a>

        </li>
        <li> <a>FAQs</a>

        </li>
        <li> <a>Complaints</a>

        </li>
    </ul>
</nav>

CSS：

.site-nav {


height: 20px;
  background: #ac0c0c;
  /* Old browsers */
  background-image: -moz-linear-gradient(#860909, #860909);
  /* FF3.6+ */
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #860909), color-stop(100%, #860909));
  /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(#860909, #860909);
  /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(#860909, #860909);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(#860909, #860909);
  /* IE10+ */
  background-image: linear-gradient(#860909, #860909);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#860909', endColorstr='#860909',GradientType=0 );
  /* IE6-8 */
  line-height: 3.0129;
  /*@include media-bp($bp10, true) {*/
  height: 48px;
  background: #ac0c0c;
  /* Old browsers */
  background-image: -moz-linear-gradient(#860909, #860909);
  /* FF3.6+ */
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #860909), color-stop(100%, #860909));
  /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(#860909, #860909);
  /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(#860909, #860909);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(#860909, #860909);
  /* IE10+ */
  background-image: linear-gradient(#860909, #860909);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#860909', endColorstr='#860909',GradientType=0 );
  /* IE6-8 */
  line-height: 3.0129;
  /*}*/ }
  .site-nav li {
    display: inline;
    list-style-type: none; }
  .site-nav li a {
    text-align: center;
    padding-right: 30px;
    padding-left: 30px;
    color: white;
    text-decoration: none; }
  .site-nav a:hover {
    background-color: #FF6600;
    color: white;
    text-shadow: none; }
  .site-nav li {
    display: inline;
    list-style-type: none; }
  .site-nav li a {
    text-align: center;
    padding-right: 30px;
    padding-left: 30px;
    color: white;
    text-decoration: none; }
  .site-nav a:hover {
    background-color: #FF6600;
    color: white;
    text-shadow: none; }

这是一个小提琴：http://jsfiddle.net/2ztHM/

由于

Answer 1

您应该将li设为display:inline-block，将a设为display:block

JSfiddle Demo

<强> CSS

site-nav li {
    display: inline-block;
    list-style-type: none; }
  .site-nav li a {
    text-align: center;
    padding-right: 30px;
    padding-left: 30px;
    display: block;
    color: white;
    text-decoration: none;}

Answer 2

演示，修复李问题

http://jsfiddle.net/2ztHM/6/

你使用的身体较少，隐藏的链接被隐藏，所以删除了：

body{
width:70%
}

Answer 3

site-nav li需要display: inline-block;

.site-nav li a需要display: block;

导航中的元素不会突出显示整个<li>悬停</li>

3 个答案: