メニューに非常に奇妙なパディングがあります。パディングは、メニュー ボタンの上と第 2 レベルのメニュー ボタンの下の両方に表示されます。
マージン、ボーダー、パディングのあらゆる種類の組み合わせを試してみましたが、この余分な色を取り除くことはできません!
*注意: 人々は推奨 (およびコメントを削除) しており、CSS を削除します:
margin-top: -0.5em;
ただし、できればこのままにしておきたいです。
残念ながら、私はより多くの評判ポイントが必要なため、写真を投稿できません (コーディングは初めてで、Stackoverflow はさらに新しいです) が、誰かが以下のコードを見て、どこが間違っているかを確認できれば、それは素晴らしいことです!
私のHTMLコード:
<ul id="menu" >
<li style="margin-left: 3em;"><a href="#">Home</a></li>
<li class="sub">
<a href="#">Our Services</a>
<ul>
<li><a href="#">Solar PV</a></li>
<li><a href="#">Air Tightness Testing</a></li>
<li><a href="#">Thermal Imaging</a></li>
<li><a href="#">Wind Turbines</a></li>
<li><a href="#">Energy Consultancy</a></li>
</ul>
</li>
<li><a href="#">Recent Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
私のCSSコード:
#menu {
margin: 0;
padding: 0;
background: #201f5f;
height: 3em;
list-style: none;
font-family:arial;
}
#menu > li {
margin-right: 3em;
margin-top: -0.5em;
background:#201f5f;
vertical-align: bottom;
}
#menu > li > a {
height: 3em;
color: #ffffff;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
}
#menu > li > a:hover {
color: #41A044;
text-decoration: underline;
}
#menu > li.sub {
position: relative;
}
#menu > li.sub ul {
font-size:15px;
margin: 0;
padding: 0;
list-style: none;
background: #000000;
position: absolute;
top: -1000em;
width: 649px;
left:-87px;
}
#menu > li.sub ul li {
display: inline-block;
}
#menu > li.sub ul li a {
height: 100%;
display: inline;
float: left;
padding-left: 0.4em;
padding-right: 0.4em;
padding-top: 0;
padding-bottom: 0;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#menu > li.sub ul li a:hover {
background: #41A044;
text-decoration: underline;
position: relative;
}
#menu > li.sub:hover ul {
top: 2.15em;
}
#menu{
text-align:center;
}
li{
display:inline-block;
}
よろしくお願いします！