simple menu 3 level

simple menu 3 level

Простое трех уровневое выпадающее меню

CSS:

/* Стили меню */
#nav-3 {
    display:inline-block;
    width:100%;
    margin:0px auto;
    padding:0;
  background:#cbcbcb;

}
#nav-3 li {
    float:left;
    position:relative;
    list-style:none;
}
#nav-3 a {
    text-decoration:none;
    display:block;
    padding:8px 20px;

}

/* выпадающий список */
#nav-3 li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav-3 ul {
    opacity:0;
    visibility:hidden;
    width:175px;
    position:absolute;
    border:1px solid #7788aa;

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav-3 ul li {
    float:none;
    margin:0;
}
#nav-3 ul a {

}
#nav-3 ul ul {
    left:180px;
    top:0px;
}




Пример HTML:


<div class="example">
    <ul id="nav-3">
        <li class="current"><a href="http://ruseller.com/index.php">Главная</a></li>
        <li><a href="http://ruseller.com/lessons.php">Уроки</a>
            <ul>
                <li><a href="http://ruseller.com/lessons.php?rub=1">HTML</a></li>
                <li><a href="http://ruseller.com/lessons.php?rub=32">JS / jQuery</a>
                    <ul>
                        <li><a href="http://ruseller.com/lessons.php?rub=32">jQuery</a></li>
                        <li><a href="http://ruseller.com/lessons.php?rub=32">JS</a></li>
                    </ul>
                </li>
                <li><a href="http://ruseller.com/lessons.php?rub=37">PHP</a></li>
                <li><a href="http://ruseller.com/lessons.php?rub=2">СSS</a></li>
                <li><a href="http://ruseller.com/lessons.php?rub=29">Для сайта</a></li>
                <li><a href="http://ruseller.com/lessons.php?rub=40">WordPress</a></li>
            </ul>
        </li>
        <li><a href="http://ruseller.com/adds.php">Ресурсы</a>
            <ul>
                <li><a href="http://ruseller.com/adds.php?rub=10">Программы</a>
                    <ul>
                        <li><a href="http://ruseller.com/adds.php?rub=10">Подпункт 1</a></li>
                        <li><a href="http://ruseller.com/adds.php?rub=10">Подпункт 2</a></li>
                        <li><a href="http://ruseller.com/adds.php?rub=10">Подпункт 3</a></li>
                        <li><a href="http://ruseller.com/adds.php?rub=10">Подпункт 4</a></li>
                    </ul>
                </li>
                <li><a href="http://ruseller.com/service.php">Онлайн инструменты</a>
                    <ul>
                        <li><a href="http://ruseller.com/service.php?rub=19">CSS</a></li>
                        <li><a href="http://ruseller.com/service.php?rub=21">Изображения</a></li>
                        <li><a href="http://ruseller.com/service.php?rub=22">Разное</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="http://ruseller.com/page.php?doc=about">Об авторе</a></li>
    </ul>
</div>