помочь преобразовать обычную навигационную панель в выпадающую навигационную панель

Question

У меня есть простая навигационная панель, которую я хочу преобразовать в выпадающую навигационную панель, но я не уверен, что мне нужно для этого сделать.Нужен ли мне определенный код JavaScript или CSS.спасибо

/* navigation menu */
div#navigation {
    height:55px;
    background:#0C1C29 url('images/nav-bg.png') repeat-x scroll top left;
}
div#innernav {
    background:transparent url('images/nav-left.png') no-repeat scroll top left;
    height:55px;
}
div#navigation ul {
    background:transparent url('images/nav-right.png') no-repeat scroll top right;
    list-style:none;
    margin:0; 
    padding:0 10px;
    position:relative;
    top:0;
    height:55px;
    display:block;
}
div#navigation ul li {
    display:block;
    float:left;
}
div#navigation ul li a {
    display:block;
    float:left;
    color:#ffffff;
    border-bottom:none;
    height:32px;
    font-family:"Trebuchet MS", Verdana, Arial;
    font-weight:bold;
    font-size:1.2em;
    padding:14px 20px 9px;
    border-right:1px solid #060D14;
    border-left:1px solid #244566;
}
div#navigation ul li.navleft a {
    border-left:none;
}
div#navigation ul li.navright a {
    border-right:none;
}
div#navigation ul li a:hover {
    color:#FC8228;
}


<div id="navigation">
        <div id="innernav">
            <ul>
                <!-- top navigation  -->
                <!-- add class navleft to first item and navright to last item as shown -->
                <li class="navleft"><a href="index.html">home</a></li>
                <li><a href="examples.html">examples</a></li>
                <li><a href="#">solutions</a></li>
                <li><a href="#">our service</a></li>
                <li><a href="#">support</a></li>
                <li class="navright"><a href="#">contact</a></li>
            </ul>
        </div>
    </div>

Answer 1

Вот пример, который использует методологию suckerfish:

http://jsfiddle.net/uCdGc/

Вот волшебство CSS:

/* Code for dropdown */
#navigation ul li ul {
    position: absolute;
    left:-999em;
}
#navigation ul li ul li {
    float:none;
    /* put the rest of your styles here*/
}
#navigation ul li:hover ul, #navigation ul li.sfhover ul {
    left:auto;
    margin-top:55px;
}

Чтобы узнать больше о suckerfish, посмотритеЭтот URL: http://www.htmldog.com/articles/suckerfish/dropdowns/

Я добавил элемент ul, содержащий элементы субнавигации, в элемент навигации «Примеры».Когда вы наводите курсор мыши, CSS разместит субнавигатор так, чтобы он отображался там, где вы хотите.Это должно работать без javascript, но если вы хотите поддерживать IE 6, вам нужно будет включить javascript library *1013* и код в блок javascript в примере.

Прямо сейчасСубнавигатор оформлен просто, но добавляйте больше стилей по мере необходимости.Я прокомментировал, где вы должны их добавить.

Удачи.