"enews-mainmenu"
Bootstrap 3.3.0 Snippet by leoteosil

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div id="enews-mainmenu"> <nav class="subnav"> <ul class="nav-pills enews-mainmenu"> <li> <a class="active" href="index-2.html">Home</a> </li> <li> <a href="javascript:void(0)">Guia Comercial</a> <div> <ul> <li> <a href="product.html">Categorias</a> </li> <li> <a href="product.html">Lugares e Regiões</a> </li> <li> <a href="product.html">Cidades</a> </li> </ul> <ul> <li> <a href="product.html">Planos</a> </li> <li> <a href="product.html">Quero assinar o Pequinaweb</a> </li> <li> <a href="product.html">Porque assinar o Pequinaweb?</a> </li> <li> <a href="product.html">FAQ do assinante</a> </li> </ul> </div> </li> <li><a href="javascript:void(0)">Classificado de Veículos</a> <div> <ul> <li> <a href="blog.html">Carros</a> </li> <li> <a href="blog.html">Motos</a> </li> <li> <a href="blog.html">Caminhões</a> </li> </ul> <ul> <li> <a href="blog.html">Comprar veículo</a> </li> <li> <a href="blog.html">Anunciar meu veículo</a> </li> <li> <a href="blog.html">Tabela de preços</a> </li> </ul> </div> </li> <li><a href="javascript:void(0)">Classificado de Imóveis</a> <div> <ul> <li> <a href="blog.html">Carros</a> </li> <li> <a href="blog.html">Motos</a> </li> <li> <a href="blog.html">Caminhões</a> </li> </ul> <ul> <li> <a href="blog.html">Comprar veículo</a> </li> <li> <a href="blog.html">Anunciar meu veículo</a> </li> <li> <a href="blog.html">Tabela de preços</a> </li> </ul> </div> </li> <li><a href="javascript:void(0)">Saiba + Sobre O Pequinaweb</a> <div> <ul> <li> <a href="myaccount.html">Quem somos e o que fazemos</a> </li> <li> <a href="myaccount.html">Contato</a> </li> <li> <a href="myaccount.html">Avisos legais</a> </li> <li> <a href="myaccount.html">Termos de uso</a> </li> <li> <a href="myaccount.html">Mapa do site</a> </li> </ul> </div> </li> </ul> </nav> </div> <!-- END Menu principal --> </div> </div>
ul.enews-mainmenu>li>a, ul.enews-mainmenu>li>a:hover, .dropdown-menu li>a,.dropdown-menu li>a:hover, ul.enews-mainmenu>li>div>ul>li>a,ul.enews-mainmenu>li>div>ul>li>a:hover { -moz-transition: all .2s ease; -webkit-transition: all .2s ease; -o-transition: all .2s ease } /* ------------ Category Menu ------------ */ #enews-mainmenu { padding: 7px 0 7px 0; background: #4C4343; background: #3A3A3A; height: 52px; } #enews-mainmenu:after { clear: both; content: ""; } #enews-mainmenu select { display: none; } #enews-mainmenu nav.subnav select { display: none; } ul.enews-mainmenu { margin: 0px 6px 0px 6px; /* padding: 0px;*/ } ul.enews-mainmenu>li { position: relative; margin: 0; /* border-right: 1px solid #eec28f; */ list-style: none; } ul.enews-mainmenu>li:last-child { border: none; } ul.enews-mainmenu>li>a { text-decoration: none; padding: 9px; display: block; z-index: 6; position: relative; color: #4b5b58 !important; color: #ffffff !important; text-transform: uppercase; font-size: 14px; } ul.enews-mainmenu>li:hover>a,ul.enews-mainmenu>li>a.active { color: #fff !important; border-radius: 0px; text-shadow: none; background-color: #f25c27; } ul.enews-mainmenu>li>div { display: none; padding: 15px; position: absolute; top: 97%; left: 7px; z-index: 99999; display: none; float: left; min-width: 120px; margin: 1px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #DDDDDD; border-bottom: 4px solid #F25C27; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .dropdown-menu { padding: 15px; position: absolute; top: 97%; left: 7px; z-index: 99999; display: none; float: left; min-width: 120px; margin: 1px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #DDDDDD; border-bottom: 4px solid #F25C27; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; } ul.enews-mainmenu>li:hover>div { display: table; width: 100%; vertical-align: top; } ul.enews-mainmenu>li>div>ul { display: table-cell; vertical-align: top; } ul.enews-mainmenu>li ul+ul { padding-left: 20px; } ul.enews-mainmenu>li ul>li { display: block; float: left; width: 100%; border-bottom: 1px dashed #dddddd } ul.enews-mainmenu>li>div>ul.arrow li a { padding: 8px 8px 8px 8px; display: block } ul.enews-mainmenu>li ul>li>a { text-decoration: none; display: block; white-space: nowrap; min-width: 120px; padding: 8px; } ul.enews-mainmenu>li>div>ul li:hover a { background-color: #f25c27; color: #fff; text-shadow: none } ul.enews-mainmenu>li>div>ul>li>a { color: #999999; } ul.enews-mainmenu>li ul>li img { margin: 3px; max-width: none } @media ( max-width : 979px) { #enews-mainmenu { margin: 0px 0 10px 0 } #enews-mainmenu select { display: block } #enews-mainmenu { background: none } #enews-mainmenu nav.subnav { width: auto; float: none } #enews-mainmenu nav.subnav select { display: inline-block; height: auto; width: 100%; float: none; } nav.subnav { background: none; border: none } nav.subnav ul { display: none } }

Related: See More


Questions / Comments: