如何添加導航下拉菜單？

這是我的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/

來源

2014-03-14 Nivin

首先把你的UL（子）在李

<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/

來源

2014-03-14 06:36:11 Abhineet

如何添加導航下拉菜單？

回答

相關問題