如何添加導航下拉菜單？

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

首先把你的ul（子菜單）放在li

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

並比添加下面的CSS

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

在這里工作http://jsfiddle.net/tcKvH/365/