HTML/CSS菜单悬停链接

Question

我的菜单悬停链接有问题.我有一个菜单HTML:

  <div class="menu">
            <ul id="nav">
                <li><div><a href="#">HOME</a> <div class="hover"></div></div></li>
                <li><div><a href="#">ABOUT</a><div class="hover"></div></div></li>
                <li><div><a href="#">PORTFOLIO</a><div class="hover"></div></div></li>
                <li><div><a href="#">SERVICE</a><div class="hover"></div></div></li>
                <li><div><a href="#">BLOG</a><div class="hover"></div></div></li>
                <li><div><a href="#">CONTACT</a><div class="hover"></div></div></li>
            </ul>
        </div>

CSS:

.menu {
    width: 950px;
    height: 50px;
    float: right;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    margin-top: 80px;
    border: 1px #FFF solid;
}

.menu #nav {
    list-style: none;   
}

.menu #nav li {
    display: inline-block;
    padding: 0px 30px 0px 30px;
}

.menu #nav li a {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
}

.menu #nav li a:hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    color: #ca6666;
}

.menu #nav li a .hover {
    display:none;
}


.menu li a:hover + .hover {
    background-image:url(images/hover.png);
    background-position:center;
    width: 96px;
    height: 33px;
    color: #ca6666;
    font-weight: bold;  
    display: block;
    margin-top: -20px;
}

.clear {
    clear: both;
}

我想让我的链接独立于其他人.例如,现在,当我将鼠标悬停在链接上时,我的菜单会扩展并且看起来不太好.当我悬停菜单而不是展开时,我想让我的悬停链接独立于其他链接.我怎样才能做到这一点？

Answer 1

您应该尝试.hover绝对定位元素,以便将其从文档流中取出,因此不会影响链接的大小:

当然,这意味着你必须让父母相对定位,即position: relative.

[编辑]:当在:hover链接上触发事件时,您将在浏览器中启动无限悬停循环,因为该<div class="hover">元素不是元素的子<a>元素,因此它会闪烁开启和关闭.

我建议你让<div class="hover">元素成为链接的子元素,即代替:

<li><div><a href="#">HOME</a> <div class="hover"></div></div></li>

使用:

<li><div><a href="#">HOME<div class="hover"></div></a></div></li>

然后对于:hover事件,使用直接后代选择器>.这是解决您问题的最小CSS(您可以查看我在下面发布的Fiddle链接中的所有内容).

.menu #nav li > div {
    position: relative;
}
.menu #nav li a > .hover {
    display: none;
}
.menu #nav li a:hover > .hover {
    background: #333;
    background-position:center;
    width: 96px;
    height: 33px;
    color: #ca6666;
    font-weight: bold;
    display: block;
    top: -20px;
    position: absolute;
}

请查看概念验证小提琴 - http://jsfiddle.net/teddyrised/e92Dj/