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

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 に答える
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 に答える