私はこのメニューバーにしばらく取り組んできましたが、メニューバーと本体のdivの間のこの約5ピクセルのギャップを取り除くことができません。
メニューバーを削除すると、divがページの一番上に表示されるため、divの前の改行ではないことを知っています（私が調べた同様の問題の1つ）。
また、メニューに関連するすべての項目に0のマージンを入れてみました。ここで何が間違っているのかわかりません。
これがテストページです：www.PartyArtisans.com/blank.phpそしてこれが私のcssスタイルシートです：http：//www.partyartisans.com/style.cssこれ が私のメニューバーCSSです。
#menu ul,
#menu li,
#menu span,
#menu a {
padding: 0;
position: relative;
}
#menu:after,
#menu ul:after {
content: '';
display: block;
clear: both;
}
body {
background-color: #95BDFF;
}
#menu {
font-family: Helvetica, sans-serif;
font-size: 18px;
line-height: 24px;
text-align: center;
margin:0px auto 0px auto;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul {
background: #FFFFFF;
background: linear-gradient(top, #FFFFFF 10%, #b87adfc 100%);
background: -moz-linear-gradient(top, #FFFFFF 10%, #b87adfc 100%);
background: -webkit-linear-gradient(top, #FFFFFF 10%,#b87adfc 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding:0px 20px 0px 20px;
margin:0px 0px 0px 0px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
list-style: none;
position: relative;
display: inline-table;
width:920px;
}
#menu ul:after {
content: "";
clear: both;
display: block;
}
#menu ul li {
width:20%;
float:left;
}
#menu ul li:hover {
background: #FFFFFF;
background: linear-gradient(top, #FFFFFF 0%, #CCF0FF 100%);
background: -moz-linear-gradient(top, #FFFFFF 0%, #CCF0FF 100%);
background: -webkit-linear-gradient(top, #FFFFFF 0%,#CCF0FF 100%);
background-image: linear-gradient(#FFFFFF, #CCF0FF);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CCF0FF',GradientType=0 ); /* IE6-9 */
}
#menu ul li:hover a {
color: #00C5FC;
}
#menu ul li a {
width:auto;
display: block;
padding: 10px 10px;
color: #00C5FC;
text-decoration: none;
}
#menu ul ul {
width:auto;
background: #E8F8FF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
#menu ul ul li {
width:auto;
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#menu ul ul li a {
width:350px;
color: #00C5FC;
}
#menu ul ul li a:hover {
background: #333399;
color: #EEFFFF;
}
そして、これがhtmlですが、それがそれと関係があるとは思いません。
<nav id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Information</a>
<ul>
<li><a href="DanielPeterse.php">About Dan The Balloon Man</a></li>
<li><a href="Jobs.php">Looking for a job?</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="BalloonTwisting.php">Balloon Twisting Entertainment</a></li>
<li><a href="FacePainting.php">Face Painting</a></li>
<li><a href="InteractiveMusic.php">Interactive Music with Miss Mary Kate</a></li>
<li><a href="HouseBand.php">Party Artisans Cover Band</a></li>
<li><a href="Decor.php">Balloon Decor and Large Sculptures</a></li>
</ul>
</li>
<li><a href="Reviews.php">Reviews</a></li>
<li><a href="Booking.php">Book us!</a></li>
</ul>
</nav>
私はそれが少し混乱していることを知っています、私はそれをコピーして、私が行くにつれてCSSを学ぶためにしばらくそれをいじくり回しました。
解決済み：Firebugをダウンロードした後、なんとか理解できました。私が変更され
line-height: 24px;
に
line-height: 10px;
そしてそれがどのように見えるか私がそれをどのように見せたいか。肩をすくめる