CSS를 사용하여 상단에서 고정 드롭 다운 메뉴를 만드는 방법은 무엇입니까?

Question

http://www.homeshop18.com/와 같은 드롭 메뉴를 만들고 싶습니다. 특히 jquery가 없으면 모든 카테고리 메뉴가 있습니다. CSS 드롭 다운 메뉴를 사용해 보았지만 문제는 상단의 두 번째 레벨 메뉴를 수정할 수 없습니다. 모든 제안을 주시면 감사하겠습니다.

Answer 1

질문을 올린 방식과 관련하여 문제가 무엇인지 이해할 수 없지만 내가 게시 한 사이트의 메뉴처럼 작동하는 CSS 만 사용하여 작성한 빠른 메뉴입니다. here

HTML :

<ul class="main"> 
    <li>all 
     <ul class="sub"> 
      <li>books 
       <ul class="sub2"> 
        <li>fiction</li> 
        <li>biography</li>      
       </ul> 
      </li> 
      <li>mobile 
       <ul class="sub2"> 
        <li>android</li> 
        <li>cmda</li>      
        <li>battery</li> 
       </ul> 
      </li>    
     </ul>  
    </li> 
</ul>​ 

CSS :이 빠른 솔루션에 대한

li { 
border:1px solid; 
padding:1px; 
} 

.main { 
list-style:none; 
position:relative;  
} 

.sub, .sub2 { 
list-style:none; 
position:absolute; 
display:none; 
width:75px;  
} 

.sub2 { 
float:left; 
left:75px; 
top:0px;  
} 

.main li:hover .sub, 
.sub li:hover .sub2{ 
display:block;  
}