탐색 드롭 다운 메뉴를 추가하는 방법?

Question

이것은 메뉴 막대를 보여주는 내 html 코드입니까?

<div id="topNav">  
<ul id="menu" style="width:854px;"> 
    <li class="topNav_list" style="border-radius:5px 0 0 5px;"><a href="{$websiteUrl}index.html" {if $page_request eq 'index.html'} style="color: #FFCA3E;background: url('img/DEllroad/homeimges/arrow.png') no-repeat scroll center bottom #0F74AD;background-color: #0F74AD;padding-bottom: 13px;"{/if}>Home</a></li> 

    <li class="topNav_list"><a href="{$websiteUrl}agenda.html" {if $page_request eq 'agenda.html'} style="color: #FFCA3E;background: url('img/DEllroad/homeimges/arrow.png') no-repeat scroll center bottom #0F74AD;background-color: #0F74AD;padding-bottom: 13px;" {/if}>Agenda</a></li> 
        <!-- <li class="topNav_list"><a href="{$websiteUrl}venue.html" {if $page_request eq 'venue.html'} style="color:#FFCA3E" {/if}>Venue</a></li> --> 
        <li class="topNav_list"style="border-radius: 0 5px 5px 0;"><a href="{$websiteUrl}registration.html" {if $page_request eq 'registration.html'} style="color: #FFCA3E;background: url('img/DEllroad/homeimges/arrow.png') no-repeat scroll center bottom #0F74AD;background-color: #0F74AD;padding-bottom: 13px;" {/if}>Register</a></li> 
        <li class="topNav_list"style="border-radius: 0 5px 5px 0;"><a href="{$websiteUrl}session.html" {if $page_request eq 'session.html'} style="color: #FFCA3E;background: url('img/DEllroad/homeimges/arrow.png') no-repeat scroll center bottom #0F74AD;background-color: #0F74AD;padding-bottom: 13px;" {/if}>Session</a></li> 
        <ul> 
         <li class="topNav_list" style="border-radius: 0 5px 5px 0;display:none;"><a href="{$websiteUrl}bangalore.html" {if $page_request eq 'bangalore.html'} style="color: #FFCA3E;background: url('img/DEllroad/homeimges/arrow.png') no-repeat scroll center bottom #0F74AD;background-color: #0F74AD;padding-bottom: 13px;" {/if}>Bangalore</a></li> 

        </ul> 
        <li class="topNav_list"style="border-radius: 0 5px 5px 0;"><a href="{$websiteUrl}gallery.html" {if $page_request eq 'gallery.html'} style="color: #FFCA3E;background: url('img/DEllroad/homeimges/arrow.png') no-repeat scroll center bottom #0F74AD;background-color: #0F74AD;padding-bottom: 13px;" {/if}>Gallery</a></li> 
       </ul> 
    </div> 

다음은 스타일을 제공하는이 페이지에 적용된 CSS 스타일 코드입니다.

#topNav { 

    font-weight:inherit; 
    background-color: #1181C1; 
    height: 46px; 
    font-size: 16px; 
} 

.topNav_list { 

    color: white; 
    float: left; 
    text-align:center; 
    list-style: none outside none; 
    padding-left: 0; 
    height:26px; 
    width:150px;  
} 

.topNav_list a{ 
    display:block; 
    padding: 12px; 
    } 
.topNav_list a:hover { 
    color: #c00; 
    background-color: #0F74AD; 
     padding-bottom: 13px; 
} 

#menu > li:hover > ul { 
    display: block; 
} 

이 HTML보기에서 탐색 드롭 다운 메뉴를 표시하는 방법. 여기에 모든 http://jsfiddle.net/tcKvH/364/

Answer 1

먼저 리튬

<li><a href="#">Session</a> 
    <ul> 
     <li><a href="#">Bangalore</a></li> 
    </ul> 
</li> 

에 UL (하위 메뉴)를 넣어보다 http://jsfiddle.net/tcKvH/365/

여기서 일하는 CSS

ul#menu li ul{ 
    display:none; 
} 
ul#menu li:hover ul{ 
    display:block; 
} 

아래 추가 샘플 코드입니다