CSS3 드롭 다운 탐색

Question

좀 더 정확히 말하자면 jQuery가 정상적으로 작동하는 것처럼 순수 CSS3 드롭 다운 탐색을 사용하여 UL 요소를 슬라이드 (및 그 안으로) 내 보냅니다.

불투명도와 가시성으로 작동 시키려고했으나 제대로 작동하지 않는 것 같습니다. 왜곡되거나 미끄러지지 않거나 마우스가 잘못된 위치에있을 때 미끄러졌습니다. .. 여기

내 CSS 클래스는 순간입니다 : 그게 내가에 대한 테마를 만드는거야 무엇으로

#nav li ul { 
    left:-20000px; 
    position:absolute; 
    z-index:1; 
    top:42px; 
    width:140px; 
    opacity:0; 
    -webkit-transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    transition: opacity .25s ease .1s; 
} 
#nav li ul:hover { 
    opacity:1; 
} 
#nav li ul li { 
    float:none; 
    background-color:#fff; 
    padding:9px 0 0 10px; 

    height:0; 
    overflow:hidden; 
    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 
#nav li ul li:hover { 
    height:40px; 
    overflow:visible; 
} 
#nav li ul li a { 
    font-size:12px; 
} 

#nav li:hover ul { 
    left:0; 
} 

html로는 워드 프레스에서입니다. 다음은 코드를 볼 수 없으므로 여기에 코드 스 니펫이 있습니다. 더 게시 할 수 없습니다.

<div id="nav-wrapper"> 
<ul id="nav"> 
<?php wp_nav_menu(array('container' => false, 'theme_location' => 'primary-menu')); ?> 
</ul> 

정말 자신이 줄을 이해하지 못하고 있지만, 이런 식으로 뭔가있을 것 같습니다 : :이뿐만 아니라 워드 프레스에 예민한 사람이 답변하는 생각

<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul> 

추신 HTML 부분에 대한 세부 사항이 부족해서 유감스럽게도, 내가 가지고 있고 발견 할 수있는 지식으로 최선을 다하고 있습니다.

EDIT # 2 : 제안 된대로 인쇄 된 원본을 복사합니다. 그러나 "메뉴 항목"또는 "하위 메뉴"클래스가 없으며 이전에 제공된 CSS 클래스에서 외관상의 변경 (색상, 테두리, 크기 등)을 만들 수 있습니다.

   <ul id="nav"> 
<li id="menu-item-1565" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1565"><a href="http://localhost/" rel="nofollow" title="" target="_blank">Home</a> 
<ul class="sub-menu"> 
<li id="menu-item-1456" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1456"><a href="http://localhost/category/news/games-news/">Games</a></li> 
<li id="menu-item-2324" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2324"><a href="http://localhost/category/news/internet-news/">Internet</a></li> 
<li id="menu-item-1876" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1876"><a href="http://localhost/category/news/hardware-news/">Hardware</a></li> 
<li id="menu-item-1786" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1786"><a href="http://localhost/category/news/software-news/">Software</a></li> 
</ul> 
</li> 
<li id="menu-item-1432" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1432"><a href="http://localhost/test1/">TEST #1</a></li> 
<li id="menu-item-1653" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1653"><a href="http://localhost/test2/">TEST #2</a></li> 
      </ul> 

Answer 1

이 시도 - http://jsfiddle.net/2mCZM/

HTML

<ul id="nav"> 
    <li><a href="#">Item 1</a> 
     <ul class="sub1"> 
      <li><a href="#">Item 1.1</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 2</a> 
     <ul class="sub2"> 
      <li><a href="#">Item 2.1</a></li> 
      <li><a href="#">Item 2.2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 3</a> 
     <ul class="sub3"> 
      <li><a href="#">Item 3.1</a></li> 
      <li><a href="#">Item 3.2</a></li> 
      <li><a href="#">Item 3.3</a></li> 
     </ul> 
    </li> 
</ul> 

CSS

#nav li { 
    display: inline-block; 
    width: 140px; 
    background: beige; 
    border-bottom: 1px solid orange; 
    position: relative; 
    height: 42px; 
    line-height: 42px; 
} 

#nav li ul { 
    position:absolute; 
    left: 0; 
    top:43px; 
    width:140px; 
    height: 0; 
    overflow:hidden; 

    -webkit-transition: height .25s linear; 
     -moz-transition: height .25s linear; 
     -o-transition: height .25s linear; 
     -ms-transition: height .25s linear; 
      transition: height .25s linear; 
} 

#nav li:hover ul.sub1 { height: 42px; } 
#nav li:hover ul.sub2 { height: 84px; } 
#nav li:hover ul.sub3 { height: 126px; }