悬停时导航填充栏，请检查答案

【问题标题】：nav fill bar on hover, please check悬停时导航填充栏，请检查
【发布时间】：2013-11-29 11:59:07
【问题描述】：

我希望我的导航项目在悬停时填充栏在那里也粘贴了 HTML，所以你可以更好地查看它。

http://i43.tinypic.com/309mzkn.png

黑色悬停在上面，我如何让它很好地填充绿色条。

HTML

<body>
<div class="headerMenu">
  <div id="wrapper">
        <div class="logo">
      <a href="#"><img src="img/logo.png" alt="Find friends online."/> </a>
      </div>

      <div class="search_box">
        <form method="get" action="search.php" id="search">
      <input name="q" type="text" size="60" placeholder="Search for people or places near you..." />
        </form>
      </div>
       <div id="menu">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Sign Up</a>
        </li>
    </ul>
    <div class="clear"></div>
</div>

    </div>
</div>
<br>
<br>
<div class="homepageSignup">
        <section id="signup">
        <h2>Sign up Below...</h2>
        <form action="#" method="post">
        <input type="text" size="25" name="fname" placeholder="First Name">
        <input type="text" size="25" name="lname" placeholder="Last Name">
        <input type="text" size="25" name="email" placeholder="Email">
      <input type="text" size="25" name="password" placeholder="Password">
        <input type="submit" name="submit" placeholder="Sign Up">
        </form>
  </section>
  </div>
</body>

CSS

    #menu {
        position:absolute; top:0px; right:0px;
        margin-right:6%;
        height:38px;
    }
    #menu ul{
        list-style-type:none;
        text-decoration:none;
    }
    #menu ul li {
        float:left;
        margin-right:15px;
    }
    #menu ul li a {
        text-decoration:none;
        font-size:18px;
        color:#fff;
    }
    #menu ul li a:hover {
        text-decoration:none;
        font-size:18px;
        color:#fff;
        background-color:#000;
        -webkit-transition: all 800ms ease;
        -moz-transition: all 800ms ease;
        -ms-transition: all 800ms ease;
        -o-transition: all 800ms ease;
        transition: all 800ms ease;
}

【问题讨论】：

澄清一下，当您将鼠标悬停在某个选项上时，您想用黑色填充整个绿色区域还是只填充选项周围的区域？
你能把 HTML 连同它一起发布吗？如果允许 JS，您可以更改我假设为 #menu 的容器的背景
@JHuangweb 我发布了 Html

标签： css navigation hover

【解决方案1】：

如果没有您的实际 HTML 标记，这只是一个猜测，但您应该能够更改

#menu ul li a:hover {

到

#menu ul li:hover {

为了达到你想要的。或者，您可以向 a 元素添加填充以进行补偿。这是一个小提琴：http://jsfiddle.net/DrydenLong/tmQ8T/

【讨论】：

OP要求更改填充整个“绿条”，因此我们需要查看绿条的标记并使用JS更新其背景颜色。
通常你会想要中元素的内边距或高度，以便空白区域可以点击。您提到了它，但我想我会为任何阅读此内容的人澄清一下。
@jhuangweb 是的，我不确定 OP 的要求是什么。我在评论中问过，但我想我会留下一个可能的解决方案，因为我们还没有得到 OP 的任何确认
@jamesmcdonnell 好点，感谢您扩展填充。

【解决方案2】：

我实际上不确定为什么您的黑色部分漂浮在中间。您在列表的父级上有填充？

无论如何。删除列表父级上的任何填充。并使列表元素锚点与您的栏的高度相同。

像这样的

#menu
{
    height:38px;
    margin-right:6%;
    position:absolute;
    right:0px;
    top:0px;
}
#menu
{
    display: block;
}
#menu li
{
    display: block;
    float: left;
}
#menu li a
{
    height:38px;
}
#menu li a:hover
{
    background: #000000;
}

这很粗糙。如果您发布 jsfiddle 或实际代码，我会适当地修改我的帖子。

【讨论】：

所以我更新了你的小提琴。它应该是你想要的东西。 jsfiddle.net/33BhC/2。无论如何，当您希望它们水平显示时，我通常更喜欢在列表等元素上使用 display: inline-block，这意味着您不必使用 clear: both on elements 来使元素正确呈现，但是它还有其他的警告。
找到了#menu { position: absolute;顶部：-12px；右：0px；保证金权利：6%；显示：块；高度：38px； } 但这不是一个好方法吗？
除非您发布完整的 css 样式表，否则在这种情况下我无能为力。它可能与包装上的边距或填充有关。或者在你的 ul 上垂直对齐。不，这不是一个好方法。
您的 ul 从默认样式继承了 12px 的顶部和底部边距。通常为了解决这个问题，人们会使用“css reset”。我一般用这个。请注意，这可能会影响您当前样式的显示方式，应将其放在您应用的任何样式之前。使用 css 重置将减轻类似这样的进一步问题。我建议你使用 css 重置，并修复出现的任何问题，并删除顶部：-12px;
我添加了 margin-top:0px 和 margin-bottom:0px;并且也可以使用：D 谢谢