我已经在这个菜单栏上工作了一段时间，我无法摆脱我的菜单栏和主体 div 之间大约 5 像素的间隙。
我知道这不是 div 之前的换行符（我查找的类似问题之一），因为当我删除菜单栏时，div 位于页面顶部。
我还尝试在与我的菜单相关的每个项目中设置 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;
以及它看起来如何我希望它看起来如何。耸耸肩