1

我认为我尝试的代码是适中的，但如果将鼠标悬停在菜单上，菜单会随着文本和背景一起移动。我尝试了几个在这里找到的代码，但没有任何改变。代码是 -

HTML：

<div class="nav">
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">about us</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>

CSS：

    div.nav {
    float: right;
    margin: 50px -120px;
}

div.nav ul{
    display: block;
    width: 480px;
}

div.nav ul li {
    float: left;
    padding: 0 10px;
    list-style-type: none;
}

div.nav ul li a:link, div.nav ul li a:visited {
    color: #1E1E1C;
    font-family: RockwellRegular,arial,helvetica,sans-serif;
    font-weight: bold;
    text-decoration: none;
}
div.nav ul li a:hover{
    background: #e41f4c;
    border: 10px solid #e41f4c;
    border-radius: 5px;
    color: #fff;
}

还没有找到任何解决方案！

小提琴：http: //jsfiddle.net/shuvo_nasir/T7Kud/

4

5 回答 5

4

这是一个解决方案：http: //jsfiddle.net/T7Kud/1/

将边框大小应用于a标签并使边框颜色透明，悬停时只需更改边框颜色。

div.nav ul li a:link, div.nav ul li a:visited {
    color: #1E1E1C;
    font-family: RockwellRegular,arial,helvetica,sans-serif;
    font-weight: bold;
    text-decoration: none;
    border: 10px solid transparent;
    border-radius: 5px;
}
div.nav ul li a:hover{
    background: #e41f4c;
    border-color: #e41f4c;
    color: #fff;
}
于 2013-06-25T06:12:40.910 回答
1

试试这个示例http://jsfiddle.net/jaisonje/8fc3A/。我已经从 li 中删除了填充并在标签中添加了填充，因为如果有填充，这是添加悬停的正确方法。

HTML：

<div class="nav">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</div>

CSS：

div.nav {
    float: right;
    margin: 50px -120px;
}

div.nav ul {
    display: block;
    width: 480px;
}

div.nav ul li {
    float: left;
    list-style-type: none;
}

div.nav ul li a:link, div.nav ul li a:visited {
    color: #1E1E1C;
    font-family: RockwellRegular,arial,helvetica,sans-serif;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    padding: 5px 10px;
}

div.nav ul li a:hover {
    background-color: #e41f4c;
color: #fff;
}
于 2013-06-25T06:23:52.603 回答
0

尝试这个：

div.nav {
float: right;
margin: 50px -120px;
}

div.nav ul{
display: block;
width: 480px;
}

div.nav ul li {
float: left;

list-style-type: none;
} 
div.nav ul li a {
padding: 10px 10px;
} 

div.nav ul li a:link, div.nav ul li a:visited {
color: #1E1E1C;
font-family: RockwellRegular,arial,helvetica,sans-serif;
font-weight: bold;
text-decoration: none;
}
div.nav ul li a:hover{
background: #e41f4c;
/*  border: 10px solid #e41f4c;*/
border-radius: 5px;
color: #fff;
}

小提琴

于 2013-06-25T06:13:09.560 回答
0

您在链接悬停上有边框，但在正常状态下没有边框。这会改变宽度和高度。我建议使用页面背景的边框颜色在链接正常状态上设置边框，使其不可见，例如：

div.nav ul li a:link, div.nav ul li a:visited {
    color: #1E1E1C;
    font-family: RockwellRegular,arial,helvetica,sans-serif;
    font-weight: bold;
    text-decoration: none;
    border: 10px solid #ffffff;
}
于 2013-06-25T06:14:22.267 回答
0

为 li 元素指定宽度它将解决您的问题。您增加了边框，这反过来又增加了 li 元素的大小

div.nav ul li {
float: left;
padding: 0 10px;
list-style-type: none;

宽度：100 像素；}

http://jsfiddle.net/T7Kud/4/

于 2013-06-25T06:18:47.303 回答