"Dropdown Prkmaster"
Bootstrap 3.0.0 Snippet by RForce

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <ul class="nav navbar-nav"> <li class="active"> <a href="http://www.prkmaster.ru/" title="Главная"> <i class="fa fa-home"></i> Главная </a> </li> <li class="dropdown open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Каталог"><i class="fa fa-tasks"></i> Каталог <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class=" dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Ламинат в Уфе"><i class="fa "></i> Ламинат </a> <ul class="dropdown-menu"> <li class="last"> <a href="/katalog/laminat/alloc.html" title="Alloc">Alloc</a> </li> </ul> </li> <li class=" dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Массивная доска в Уфе"><i class="fa "></i> Массивная доска </a> <ul class="dropdown-menu"> <li class=""> <a href="/katalog/massivnaya-doska/farecom_superbase.html" title="Farecom Superbase (Россия, Москва)"> Farecom Superbase </a> </li> <li class=""> <a href="/katalog/massivnaya-doska/smartfloor.html" title="SmartFloor (Россия, СПб)"> SmartFloor </a> </li> <li class="last"> <a href="/katalog/massivnaya-doska/corona_exotic.html" title="Корона Exotic (Россия, Москва)"> Корона Exotic </a> </li> </ul> </li> <li class=" dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Паркетная доска: продажа в Уфе"><i class="fa "></i> Паркетная доска </a> <ul class="dropdown-menu"> <li class=""> <a href="/katalog/parketnaya-doska/baum-parkett.html" title="Baum Parkett"> Baum Parkett </a> </li> </ul> </li> <li class=""> <a href="/katalog/parket-shtuchnyij.html" title="Штучный паркет в Уфе"> Паркет штучный </a> </li> <li class=""> <a href="/katalog/xudozhestvennyij-parket.html" title="Художественный паркет"> Художественный паркет </a> </li> <li class=" dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Пробковое покрытие для пола в Уфе"><i class="fa "></i> Пробковое покрытие </a> <ul class="dropdown-menu"> <li class="last"> <a href="/katalog/probka/corkart.html" title="Corkart">Corkart </a> </li> </ul> </li> <li class=""> <a href="/katalog/parketnyie-rabotyi.html" title="Ремонт и укладка паркета в Уфе"> Паркетные работы </a> </li> <li class=""> <a href="/katalog/parketnaya-ximiya-kleya-laki-masla.html" title="Паркетная химия (клея, лаки, масла)"> Паркетная химия </a> </li> <li class="last"> <a href="/katalog/nivelir-lagi.html" title="Нивелир лаги"> Нивелир лаги </a> </li> </ul> </li> <li class=""> <a href="/galereya-rabot.html" title="Галерея работ"> <i class="fa fa-picture-o"></i> Галерея </a> </li> <li class=""> <a href="/vopros-otvet.html" title="Вопрос-ответ"> <i class="fa fa-comments"></i> Вопрос-ответ </a> </li> <li class=""> <a href="/kontaktnaya-informacziya.html" title="Контактная информация"> <i class="fa fa-info"></i> Контакты </a> </li> <li class=" dropdown "> <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Наш клуб"><i class="fa fa-group"></i> Наш клуб <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class=""> <a href="/nash-klub/konopleva-oksana.html" title="Дизайнер Коноплева Оксана"> Коноплева Оксана </a> </li> </ul> </li> <li class="last"> <a href="/publikaczii.html" title="Публикации"> <i class="fa fa-file-text-o"></i> Публикации </a> </li> </ul> </div> </div>
.dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }

Related: See More


Questions / Comments: