기본 탐색 메뉴와의 일관성 코딩 드롭 다운 메뉴

Question

내 기존 탐색 CSS 디자인을 기반으로 드롭 다운 메뉴를 만들 수 없습니다. 여기

는 GET 탭을 시작에서 내가 감사 멀티 레벨 menu..all 지원을 드롭 다운 추가 할 현재의 탐색 코드를

     <ul> 
         <li><a href="index" class="current">Home</a></li> 
         <li><a href="psat-sat-act-online-tutoring">Subjects &amp; Pricing</a></li> 
         <li><a href="how-online-tutoring-works">Get Started</a></li> 
         <li><a href="system-requirements">System Requirements</a></li> 
         <li><a href="faq-us">FAQ</a></li> 
         <li><a href="contact-us">Contact Us</a></li> 


        </ul> 

와 CSS 코드

header h1 {background:url(../images/logo.png) no-repeat 0 0;padding:2px 0 0 38px;font-family:'ColaborateThinRegular';font-size:26px;line-height:1.2em;color:#fff;font-weight:normal;float:left} 
header h1 a {color:#fff;text-decoration:none} 
header h1 strong {font-family:'ColaborateBoldRegular';font-weight:normal} 
header nav {padding:7px 0 10px 0} 
header nav ul {float:right;padding:2px 0 0 0} 
header nav ul li {float:left;padding-left:4px} 
header nav ul li a {position:relative;float:left;font-size:12px;color:#fff;text-decoration:none;font-family:'ColaborateThinRegular';text-transform:uppercase;height:32px;line-height:32px;background-color:#181717;padding:0 36px 0 10px;border-radius:17px;-moz-border-radius:17px;-webkit-border-radius:17px} 
header nav ul li a:hover, header nav ul li a.current {background-image:-moz-linear-gradient(top, #ee3c09, #b90a09);/* FF3.6 */background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #ee3c09),color-stop(1, #b90a09));/* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ee3c09', endColorstr= '#b90a09');/* IE6,IE7 */-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr= '#ee3c09', endColorstr= '#b90a09')";/* IE8 */} 
header nav ul li a:after {content:'';display:block;position:absolute;right:12px;top:13px;width:4px;height:7px;background:url(../images/arrow1.gif) no-repeat 0 0} 
header .adv-content {overflow:hidden;background:#f9f9f9;padding:10px 0 8px 0} 
header .breadcrumbs {float:left;padding:3px 0 0 10px} 
header .breadcrumbs li {display:inline;color:#212121;padding-left:5px} 

입니다

Answer 1

HTML 요소에 클래스 이름을 정의하지 않았습니다. 드롭 다운을 원하는 각 li에 새로운 순서가없는 목록을 추가해야합니다.

<div id="header"> 
<ul class="nav"> 
    <li><a href="index" class="current">Home</a></li> 
    <li><a href="psat-sat-act-online-tutoring">Subjects &amp; Pricing</a></li> 
    <li> 
     <a href="how-online-tutoring-works">Get Started</a> 
     <ul id="dropdown"> 
      <li><a href="#">Link 1</a> 
      <li><a href="#">Link 2</a> 
     </ul> 
    </li> 
    <li><a href="system-requirements">System Requirements</a></li> 
    <li><a href="faq-us">FAQ</a></li> 
    <li><a href="contact-us">Contact Us</a></li> 
</ul> 
</div> 

다음을 CSS에 추가해야합니다.

ul.nav ul { 
    visibility: hidden; 
    z-index: 598; 
} 
ul.nav li:hover > ul { 
    visibility: visible; 
}