Как добавить выпадающее меню навигации?

Question

Как добавить выпадающее меню навигации?

0

Это мой 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/

Nivin 14 март 2014, в 07:22

Источник

Теги:

javascript

html

css

1 ответ

Ещё вопросы

Abhineet · Accepted Answer · 2014-03-14T03-52-00.000Z

Прежде всего положите свою 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/