간단한 HTML CSS 드롭 다운 메뉴 문제

-bottom : 220px를 추가하여 탐색 모음을 위로 이동했습니다. nav ul {}에서는 중첩 목록을 올바르게 표시하지 않습니다. 당신이 공중 선회 할 때까지 그들은 백색이거나 거기 있지 않습니다. 나는 그것이 단순한 무엇인가라고 확신한다. 그러나 나는 그것을 이해하는 것처럼 보일 수 없다. 도움에 감사드립니다! -bottom을 제거하면 : 220px; 올바르게 표시되어야합니다.간단한 HTML CSS 드롭 다운 메뉴 문제

@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>

출처

2014-03-26 user3466258

Medford huh? 나는 벤드 출신이야 ... –