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

我希望我的导航项在悬停时填满栏将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;
}

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

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

所以像这样的事情

#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或实际代码，我将适当地修改我的帖子。

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

#menu ul li a:hover {

自

#menu ul li:hover {

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

相关内容

最新更新

热门标签：