当我通过添加-bottom来向上移动导航栏时：220px;导航到ul {}，它现在无法正确显示我的嵌套列表。它们是白色的还是不存在的，直到您将鼠标悬停为止。我敢肯定这很简单，但似乎无法弄清楚。感谢您的帮助！如果您删除-bottom：220px;它应该正确显示。
@charset "UTF-8";
/* CSS Document */
/* START NAVIGATION BAR */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #656565;
background: linear-gradient(top, #bbbbbb 0%, #656565 100%);
background: -moz-linear-gradient(top, #bbbbbb 0%, #656565 100%);
background: -webkit-linear-gradient(top, #bbbbbb 0%, #656565 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
bottom: 220px;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
font-family: Helvetica,Arial,sans-serif;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
/* END NAVIGATION BAR */
/* START Social Media Icons */
#socialIcon1 {
position:relative;
left: 390px;
bottom: 280px;
}
#socialIcon2 {
position:relative;
left: 170px;
bottom: 220px;
}
/* END Social Media Icons */
/* HEADER */
#contactInfo {
position:relative;
bottom: 140px;
left: 40px;
}
#logo {
position:relative;
right: 220px;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Southern Oregon Gymnastics Academy</title>
<link href="SOGAnavBar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align= center>
<a href = "http://soga-gym.com"><img src="../Images/sogaLogo.png" alt="Southern Oregon Gymnastics Academy" name="logo" width="329" height="143" id="logo" longdesc="http://soga-gym.com/" /></a>
<h2 id= "contactInfo">3001 Samike Dr. <br />Suite 112, <br />Medford, OR 97501 <br /> 541-245-9379</h2>
<a href = "https://twitter.com/SOGymnastics" target="_blank"> <img src="../Images/twitter.png" alt="Fallow SOGA on Twitter" name="twitter" width="217" height="61" id="socialIcon1" /></a>
<a href = "https://www.facebook.com/Southern.Oregon.Gymnastics.Academy" target="_blank"><img src="../Images/facebook.png" alt="Like SOGA on Facebook" name="socialIcon2" width="217" height="61" id="socialIcon2" longdesc="https://www.facebook.com/Southern.Oregon.Gymnastics.Academy" /></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Classes</a>
<ul>
<li><a href="#">Birthday Parties</a></li>
</ul>
</li>
<li><a href="#">Our Team</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Birthday Parties</a></li>
<li><a href="#">Field Trips</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</body>
</html>
最佳答案
您正在使用许多relative定位的元素，这导致存在额外的空间。与其尝试手动放置所有内容，不如让它自动发生：
a, h2 {
display: inline-block;
}
摆脱添加的
bottom:220px和/* END NAVIGATION BAR */下的所有CSS。这将使标题中的元素彼此相邻流动。http://jsfiddle.net/dsPNJ/