0

ナビゲーション バーにカーソルを合わせたときに、横のバーを非表示にする方法がわかりません。誰でも助けることができますか？ナビゲーション バーの外観や位置を変更したくありません。ホバリングの影響を受けない部分だけを作りたいです。

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>

<body>

<div id="container">
<div id="body">
<center>
    <ul class="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="biography.html">Biography</a></li>
    </ul>
    </center>
</div>    
</div>
</body>
</html>

CSS:

    @charset "utf-8";


#container {
    margin-left:auto;
    margin-right:auto;
    width:960px;
    background-color:#666666;
}

#body {
    background-color:#666666;
    width:960px;
    height:500px;
    border:2px solid #FFFFFF;
    margin-top:50px auto;
}

.navbar {margin:0px;
    background-color:#66FF33;
    text-align:center;
    list-style:none;
    border-bottom:none;
    padding-left:0px    
}

ul.navbar li {
    width:19%;
    display:inline-block;
}

ul.navbar a {

    display:block;
    width:100%;
    margin:0px;
    padding:10px 0px;
    text-decoration:none;
}

ul.navbar a:hover {
    background-color:#33FFD7;
}

body {
    background-color:#333333;
}
4

1 に答える 1

0

<li>要素間のすべてのスペースを削除してみてください。スペースは、リンク間に余分なスペースを作成しています。これにより、幅 100% に加えて、幅 20% で 5 つの要素を作成する必要があります。

<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Services</a></li><li><a href="biography.html">Biography</a></li>

これよりも満足のいく答えがあることを願っていますが、迅速かつ簡単にしたいだけなら、これでうまくいきます。

JSFiddle

于 2013-07-11T23:14:49.907 に答える