Преобразование меню навигации 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

Tryout это: http://jsfiddle.net/BcYJj/7/

Набор height на главной ul, так что зеленый фон получает окрашены (в противном случае его 0px высокий):

#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 s, переместил его (left, top) и установил z-index. Установите top/left, чтобы он отображался ниже, а не прямо к пункту меню. Установите z-index из-за ошибки видимости:

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

Редактировать
удалены ненужного шаг, обновляемую ссылку и добавил объяснение;)

Я надеюсь, что это помогает!

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; 
}