Html 使用css在鼠标上更改背景颜色

我正在制作一个导航菜单。() css代码是：

/* Menu */
        .menu {
            height: 100px;
            float: right;
            z-index: 100;
        }

        .menu li {
            display: inline;

        }

        .menu ul {
            margin-top: 45px;
        }

        .menu a {
            text-decoration : none;
            font-size: 15px;
            color: #ffffff;
        }

        .menu li a {

        }

        .menu a:hover {
            background-color: #306;
        }

        .active , .inactive {
            width: 800px;
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 50px;
            padding-bottom: 34px;
        }

        .active {
            background-color: #306;
            color: #ffffff;
        }

        .inactive {
            color: #ffffff;
            background-color: #0CF;
        }

HTML代码是：

<div class="menu">
                <ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li class="inactive"><a href="#">About</a></li>
                    <li class="inactive"><a href="#">Products</a></li>
                    <li class="inactive"><a href="#">Product Support</a></li>
                    <li class="inactive"><a href="#">Contact Us</a></li>
                    <li class="inactive"><a href="#">FAQ</a></li>
                </ul>
            </div>

我不想要中间的空白，但不知道怎么做。另外，当我在上面做鼠标时，我想实现颜色应该是深色的。我只能改变文本的背景色，但我想实现一种标签式的效果

感谢您的帮助。我是开发领域的新手，我还在学习CSS

---

我还在顶部附加了一个JSFIDLE链接。来展示我到现在为止所做的一切。链接是[此处]：（）

给予：将鼠标悬停到

而不是

试试这个

.menu li:hover {
       background-color: #306;
}

改变

.menu a:hover {
    background-color: #306;
}

借

编辑：要点击整个块，只需将您的

放入

---

您需要这样的东西：

你需要

.menu li {
    display: inline;
    float: left;
    width: auto;
    cursor: pointer;
}

通过这种方式，所有列表元素将彼此靠近，因为它们会自动调整其宽度

此处演示：

---

或者，您可以使用

li

s上的

display:block

和

float:left

来删除空格。当它们内联时，浏览器将它们视为单词，因此在它们之间留出空间。

尝试将活动类和非活动类设置为

a

标记：

<div class="menu">
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#" class="inactive">About</a></li>
    <li><a href="#" class="inactive">Products</a></li>
    <li><a href="#" class="inactive">Product Support</a></li>
    <li><a href="#" class="inactive">Contact Us</a></li>
    <li><a href="#" class="inactive">FAQ</a></li>
  </ul>
</div>

---

编辑：更新了示例。我对JSFiddle:S没有太多的经验，它很有效。哇！谢谢我还希望菜单是联合的，而不是空白。我该怎么做？当我将鼠标移到文本上，看到要单击的手形图标时，是否可以使整个框都有可以单击的链接？@user3152887，请检查下面的答案，以获得要单击的链接。@king:但它仍然不可单击。我只能单击文本进行导航。我们可以让整个区域都可以点击吗？@user3152887检查这个，full li clickable:非常感谢大家的帮助。我已经把菜单准备好了。

.menu {
    height: 100px;
    float: right;
    z-index: 100;
    width: 600px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li a {
    display: block;
    float: left;
    height: 60px;
    color: #ffffff;
    background-color: #0CF;
    padding: 10px;
    padding-top: 40px;
}

li a:hover {
    background-color: #306
}

.menu li {
    display: inline;
    float: left;
    width: auto;
    cursor: pointer;
}

<div class="menu">
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#" class="inactive">About</a></li>
    <li><a href="#" class="inactive">Products</a></li>
    <li><a href="#" class="inactive">Product Support</a></li>
    <li><a href="#" class="inactive">Contact Us</a></li>
    <li><a href="#" class="inactive">FAQ</a></li>
  </ul>
</div>

.menu li {
  display: inline;
  float:left;
  width:auto;
}