Question

我有这个CSS：

#menu {
    float:right;
}
#menu > ul > li {
    display:inline;
    float:left;
    color:#FFFFFF;
    margin-right:20px;
    padding:5px;
    text-decoration:none;
    font-size:20px;
}
#menu > ul > li > a:hover {
    background-color:#CCC;
}

和这个HTML：

<div id="menu">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">Home</a></li>
            </ul>
            </div><!-- menu -->

但当我将鼠标悬停在链接上时，链接会向左移动 - 任何想法？

Answer 1

试试这个css：

#menu {
    float:right;
}
#menu > ul > li {
    display:inline;
    float:left;
    color:#FFFFFF;
    margin-right:20px;
    padding:5px;
    text-decoration:none;
    font-size:20px;
}
#menu > ul > li > a:hover {
    display:inline;
    float:left;
    color:#CCC;
    margin-right:20px;
    padding:5px;
    text-decoration:none;
    font-size:20px;
}

Answer 2

#menu > ul > li > a:hover {
    background-color:#CCC;
    float: right !important;
}

这应该有效

CSS菜单移动链接在悬停时离开

2 个答案: