如何添加导航下拉菜单？

This is my html code which is showing a menu bar?

这是我的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>

Here is the css style code applied on this page which is giving style to it.

这是在此页面上应用的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;
}

How to display navigation dropdown menu in this html view. Here is the sample code http://jsfiddle.net/tcKvH/364/

如何在此html视图中显示导航下拉菜单。以下是示例代码http://jsfiddle.net/tcKvH/364/

1 个解决方案

#1

First of all put your ul(submenu) in li

首先把你的ul(子菜单)放在li中

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

and than add below css

而不是添加下面的CSS

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

Working here http://jsfiddle.net/tcKvH/365/

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

#1