html - 使用CSS更改鼠标悬停时的背景颜色

Question

我正在制作一个导航菜单。 ( http://jsfiddle.net/genxcoders/ZLh3F/ ) 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>

我不想要两者之间的空白，但不知道该怎么做。另外，当我将鼠标悬停在上面时，我想实现颜色应该是深色 #306。我只能更改文本的背景颜色，但我想实现一种标签效果。

任何帮助表示赞赏。我是开发领域的新手，我还在学习 CSS。

我还在顶部附加了一个 JSFiddle 链接。展示我到目前为止所做的事情。链接是 [这里]:( http://jsfiddle.net/genxcoders/ZLh3F/ )

Answer 1

给:悬停到<li>不要<a>