"teste submenu"
Bootstrap 3.1.0 Snippet by cassiodourado1

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <style> body { padding-top: 50px; } </style> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><img id="logonavbar" src="<?php bloginfo('stylesheet_directory'); ?>/img/logo-clinica-meu-sorriso.jpg"> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="hidden"><a href="#page-top"></a></li> <li><a href="/a-clinica-meu-sorriso">A Clínica Meu Sorriso</a></li> <li> <a class="dropdown-toggle" data-toggle="dropdown" href="/a-clinica-meu-sorriso">Tratamentos</a> <ul class="dropdown-menu multi-level"> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ortodontia</a> <ul class="dropdown-menu"> <li><a href="tratamentos/ortodontia-aparelhos-ortopedicos">Aparelhos Ortopédicos</a></li> <li><a href="tratamentos/ortodontia-aparelho-ortodontico-convencional">Aparelho Ortodôntico Convencional</a></li> <li><a href="tratamentos/ortodontia-aparelho-ortodontico-autoligado">Aparelho Ortodôntico Autoligado</a></li> <li><a href="tratamentos/ortodontia-aparelho-ortodontico-estetico">Aparelho Ortodôntico Estético</a></li> </ul> </li> <li><a href="tratamentos/tratamento-orto-cirurgico">Tratamento orto-cirúrgico</a></li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Check-up preventivo digital</a> <ul class="dropdown-menu"> <li><a href="/tratamentos/check-up-preventivo-digital/importancia">Qual a importância do check-up preventivo digital?</a></li> <li><a href="/tratamentos/check-up-preventivo-digital/boca-saudavel-corpo-saudavel">Boca saudável, corpo saudável!</a></li> </ul> </li> <li><a href="/tratamentos/tratamento-das-disfuncoes-temporomandibulares-dtm"> Tratamento das Disfunções Temporomandibulares (DTM)</a></li> <li><a href="/tratamentos/laserterapia"> Laserterapia</a></li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Clareamento dental a laser</a> <ul class="dropdown-menu"> <li><a href="/tratamentos/clareamento-dental-a-laser/como-agem-os-clareadores">Como agem os clareadores</a></li> <li><a href="/tratamentos/clareamento-dental-a-laser/como-pode-ser-feito-o-clareamento">Como pode ser feito o clareamento</a></li> <li><a href="/tratamentos/clareamento-dental-a-laser/consideracoes-importantes">Considerações importantes</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tartarectomia (limpeza dentária)</a> <ul class="dropdown-menu"> <li><a href="/tratamentos/tartarectomia-limpeza-dentaria/placa-bacteriana">Placa bacteriana</a></li> <li><a href="/tratamentos/tartarectomia-limpeza-dentaria/tartaro">Tártaro</a></li> <li><a href="/tratamentos/tartarectomia-limpeza-dentaria/gengivite">Gengivite</a></li> <li><a href="/tratamentos/tartarectomia-limpeza-dentaria/periodontite">Periodontite</a></li> <li><a href="/tratamentos/tartarectomia-limpeza-dentaria/endocardite">Endocardite bacteriana</a></li> <li><a href="/tratamentos/tartarectomia-limpeza-dentaria/mucosite-periimplantar">Mucosite periimplantar</a></li> </ul> </li> </ul> </li> <li><a href="/blog">Blog</a></li> <li> <a href="/agende-sua-avaliacao" class="btn btn-punch btn-secondary btn-darker hover-inverse btn-sm" role="button">Agende sua Avaliação</a> </li> </ul> </div><!--/.nav-collapse --> </div> </nav>
.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; } .btn-punch.btn-secondary.btn-darker { background-color: #00A5AD; color: #ffffff; } .navbar-nav li a, .navbar-default .navbar-nav>li>a { color: #00A5AD; cursor: pointer; text-decoration: none; } body { padding-top: 50px; }

Related: See More


Questions / Comments: