CSS3 탐색 메뉴 변형

Question

꽤 괜찮은 메뉴라고 생각되는 훌륭한 튜토리얼을 발견했습니다. 비슷한 세로 형 드롭 다운으로 바꾸려고합니다. http://nettuts.s3.amazonaws.com/699_nav/navCode/nav.html 또는 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/?search_index=3

단지 목록이 옆에서 오는 것이 아니라 아래로 내려 오도록하고 싶습니다. 나는 그것을 해결할 것이라고 생각한 것을 시도했고 인라인을 표시하는 li 요소를 목표로 삼았지만, 나는 그것을 변화시킬 수 없다. 내가 변경 한 것이 효과가 없거나 뒤죽박죽이되는 원인이된다.

Fiddle

CSS

#thisNav{ 
    width: 250px; 
    margin: 20px; 
    background:#bada55; 
} 

#thisNav ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

#thisNav ul li{ 
    /*child elements positioned absolutley will be relative to this*/ 
    position: relative; 
    border-top: 1px solid #e9e9e9; 

} 

#thisNav a{ 
    color: ghostwhite; 
    padding: 12px 0px; 
    /*fill hori space*/ 
    display: block; 
    text-decoration: none; 
/*apply transition to background property, taking 1s to change it 
*/ 
    transition:padding 1s, background 1s; 
    -moz-transition:padding 1s, background 1s; 
    -webkit-transition:padding 1s, background 1s; 
    -o-transition:padding 1s, background 1s; 

    font-family:tahoma; 

    font-size:13px; 
    text-transform:uppercase; 
    padding-left:20px; 
} 

/*hover pseduo class*/ 
#thisNav a:hover{ 
    /* 
    RGBA background for transparancy: 
    last number(0.05) is the transparency 
    */ 
    padding-left:35px; 
    background: RGBA(255,255,255,0.05); 
    color:#fff; 
} 

#thisNav ul li:hover ul{ 
    /*diplay when hovered*/ 
    display: block; 

} 

#thisNav ul ul{ 
    position: absolute; 
    left: 250px; 
    top: 0; 
    border-top: 1px solid #e9e9e9; 
    display: none; 
    width: 304px; 
} 

#thisNav ul ul li{ 
    width: 150px; 
    background: #f1f1f1; 
    border: 1px solid #e9e9e9; 
    border-top: 0; 
    float:left; 

} 

#thisNav ul ul li a{ 
    color:#000000; 
    font-size:12px; 
    text-transform:none; 
} 

#thisNav ul ul li a:hover { 
    color:#929292; 
} 

#thisNav span { 
    width:12px; 
    height:12px; 
    background:#fff; 
    display:inline-block; 
    float:left; 
    margin-top:3px; 
    margin-right:10px; 
    position:relative; 
    transition:all 0.5s; 
    -moz-transition:all 0.5s; 
    -o-transition:all 0.5s; 
    -webkit-transition:all 0.5s; 
} 
#thisNav a:hover span { 
    background: #7d2c41; 
    transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
} 

/*Horizontal line*/ 
#thisNav span:before { 
    content:""; 
    width:12px; 
    height:2px; 
    background:#3a3b3b; 
    position:absolute; 
    left:0px; 
    top:5px; 
} 
/*Vertical line*/ 
#thisNav span:after { 
    content:""; 
    width:2px; 
    height:12px; 
    background:#3a3b3b; 
    position:absolute; 
    left:5px; 
    position:top; 
} 

HTML

<nav id = "thisNav"> 
     <ul> 
      <li> 
       <a href="#"><span></span>one</a> 
       <ul> 
        <li><a href="#">sub1</a></li> 
        <li><a href="#">sub2</a></li> 
        <li><a href="#">sub3</a></li> 
       </ul> 
      </li> 

      <li> 
       <a href="#"><span></span>two</a> 
       <ul> 
        <li><a href="#">sub1</a></li> 
        <li><a href="#">sub2</a></li> 
        <li><a href="#">sub3</a></li> 
       </ul> 
      </li> 
    </ul> 
</nav> 

Answer 1

이 트라이 아웃 :,321 주요 ul에 height을 설정 0

, 그래서 녹색 배경은 (그렇지 않으면 그 0 픽셀 높은) 그린됩니다 :

#thisNav ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    height: 40px; 
} 

이 li의 고지합니다, 그래서 주요 li의 수평 나열되어 있습니다

#thisNav ul li{ 
/*child elements positioned absolutley will be relative to this*/ 
position: relative; 
border-top: 1px solid #e9e9e9; 

float: left; 

}

삭제 된 width의 하위 ul 재배치 (left, top)하고 z-index을 설정하십시오. top/left을 설정하면 메뉴 항목 바로 아래에 대신 표시됩니다.

내가이 도움이되기를 바랍니다)

#thisNav ul ul{ 
    position: absolute; 
    left: 0px; 
    top: 40px; 
    border-top: 1px solid #e9e9e9; 
    display: none; 
    /*width: 304px;*/ 
    z-index: 1; 
} 

편집
제거 불필요한 단계 업데이트 링크 및 설명을 덧붙였다 인해 가시성 오류에 z-index를 설정!

Answer 2

Changed some css in your fiddle

#thisNav ul ul{ 
    border-top: 1px solid #e9e9e9; 
    display: none; 
    width: 100%; 
} 

#thisNav ul ul li{ 
    width: 100%; 
    background: #f1f1f1; 
    border: 1px solid #e9e9e9; 
    border-top: 0; 
}