Question

当我通过添加-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>

Answer 1

在第13行使用nav > ul代替nav ul。

Answer 2

您正在使用大量relative个定位元素，这会导致额外的空间存在。而不是尝试手动定位所有内容，让它自动发生，如下所示：

a, h2 {
  display: inline-block;
}

摆脱您添加的bottom:220px以及/* END NAVIGATION BAR */下方的所有CSS。这将允许标题中的元素彼此相邻。

http://jsfiddle.net/dsPNJ/

简单的HTML CSS下拉菜单问题

2 个答案: