2

ホバーすると、背景色がナビゲーションアイテムである「ボックス」の外に出ているように見えます。私はすべてを微調整しようとしました。これが私のCSSとHTMLです...

<div id="menuTop">

 <ul id="menuOne" class="menuHoriz">
    <li><a href="index.html">home</a></li>
    <li><a href="communication.html">about us</a></li>
    <li><a href="about.html">services</a></li>
    <li><a href="help.html">samples</a></li>
    <li><a href="contact.html">contact</a></li>
</ul>

</div>

#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
 }

#menuTop ul, #menuTop li {
margin: 0;
padding: 4px 0 0 0;
}

#menuTop ul {
list-style-type: none;
}

#menuTop li {
display: block;
background-color: #3C87D1;
text-align: center;
width: 197px;
height: 30px;
margin: 0 0px 0 0;
padding: 4px 0 0 0;
border: 1px solid #2A5E92;
}

#menuTop a {
display: block;
margin: 0;
padding: 4px 0 0 0;
}

#menuTop a:link, #menuTop a:visited {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}

#menuTop a:hover {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
color: #fff;
background-color: #5F9FFF;
}

ul.menuHoriz li {
float: left;
}
4

3 に答える 3

1

問題がボックスの外側にある色だけである場合は、これを#menuTopliに追加します

overflow:hidden;

私のために働きます。:)

于 2011-05-26T21:18:00.157 に答える
1

私はあなたのスタイルシートから不要な/二重の定義を削除し、バグを修正しました。

* {
    margin: 0;
    padding: 0
}
#menuTop {
    font: 12pt 'Trebuchet MS', Helvetica, sans-serif;
    padding-top: 18px;
    height: 55px;
    background: #000
}
#menuTop ul {
    padding-top: 4px;
    list-style: none
}
#menuTop li {
    background: #3C87D1;
    border: 1px solid #2A5E92;
    text-align: center
}
#menuTop a {
    display: block;
    width: 197px;
    line-height: 30px
}
#menuTop a:link, #menuTop a:visited {
    color: #fff;
    text-decoration: none
}
#menuTop a:hover {
    background-color: #5F9FFF
}
ul.menuHoriz li {
    float: left
}

ここにいくつかのメモがあります：

  • *レイアウトを設計する前に、を使用してすべての要素のマージンとパディングをゼロに設定すると便利です。
  • メニュー項目の幅と高さをa要素のみ（最もネストされた要素）に設定します。周囲のli要素は同じサイズになります。また、テキストが自動的に垂直方向の中央に配置されるため、line-height代わりに使用します。height
  • :link、、、またはのスタイルを再定義しないでください（たとえば、寸法やフォント）:visited。ブラウザに不要な計算を与えます。:hover:active
于 2011-05-26T21:28:06.447 に答える
0

これを試してください：jsfiddleの例

#menuTop {
    clear: both;
    padding-top: 18px;
    height: 55px;
    font-size: 12pt;
    background-color: #000;
    text-align: center;
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    line-height: 34px;    
}
#menuTop a {
    float: left;
    border: 1px solid #2A5E92;
    background-color: #3C87D1;
    width: 197px;
    color: #fff;
    text-decoration: none;
}
#menuTop a:hover {
    background-color: #5F9FFF;
}
于 2011-05-26T21:33:56.973 に答える