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>

Answer 2

试试这个

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

Demo

Answer 3

更改

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

通过

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

编辑：要将整个广告块点击为juste，将<li>置于<a>内，如：

<a href="#"><li class="active">Home</li></a>

Answer 4

你需要这样的东西：http://jsfiddle.net/ZLh3F/7/

.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
}

Answer 5

你需要

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

以这种方式，所有列表元素将彼此接近，因为它们自动调整宽度

演示：http://jsfiddle.net/aelor/ZLh3F/9/

作为替代方案，您可以使用display:block上的float:left和li来删除空格。当它们内联时，浏览器将它们视为单词，因此在它们之间留下空间。

Answer 6

尝试将有效和无效类设置为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>

这样，链接区域将是完整的块，而不仅仅是文本。示例：http://jsfiddle.net/6ZM6z/4/

以.menu li样式添加float:left;width:auto;：

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

编辑：更新了示例。我对JSFiddle没有太多经验：S

使用css在鼠标悬停时更改背景颜色

6 个答案: