Dificuldades com Menu
Duvido que alguem consiga resolver esse problema ....
e o seguinte , eu tenho um menu com submenu .
ai na hora que voce coloca o mouse em cima do submenu , o menu princinpal perde a suas propiedades hover no css .
ja tentei de tudo , se alguem consigar resolver , eu fico muito agradecido .
html
<!-- Menu -->
<div class="menu_main">
<div class="navbar yamm navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-toggle .navbar-collapse .pull-right " data-toggle="collapse" data-target="#navbar-collapse-1" > <span>PRODUtos </span>
<button type="button" > <i class="fa fa-bars"></i></button>
</div>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse pull-right">
<nav>
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle active"><b> Dicas 2
</b>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="../../layout2/fullwidth/index.html">Layout Light</a> </li>
<li><a href="index.html">Layout Classic</a> </li>
<li><a href="../../layout4/fullwidth/index.html">Layout Light2</a> </li>
<li><a href="../../layout5/fullwidth/index.html">Layout Classic2</a> </li>
<li><a href="../../layout7/fullwidth/index.html">Layout Classic3</a> </li>
<li><a href="../../layout1/fullwidth/index.html">Layout Creative</a> </li>
<li><a href="../../layout6/fullwidth/index.html">Layout One Page</a></li>
<li class="dropdown-submenu mul"> <a tabindex="-1" href="#">Header Styles</a>
<ul class="dropdown-menu">
<li><a href="../../layout2/fullwidth/index.html">Header Style1</a> </li>
<li><a href="index.html">Header Style2</a> </li>
<li><a href="../../layout4/fullwidth/index.html">Header Style3</a> </li>
<li><a href="../../layout5/fullwidth/index.html">Header Style4</a> </li>
<li><a href="../../layout6/fullwidth/index.html">Header Style5</a> </li>
<li><a href="../../layout1/fullwidth/index.html">Header Style6</a> </li>
<li><a href="../../layout7/fullwidth/index.html">Header Style7</a> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle" ><b> Dicas 3
</b>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="../../layout2/fullwidth/index.html">Layout Light</a> </li>
<li><a href="index.html">Layout Classic</a> </li>
<li><a href="../../layout4/fullwidth/index.html">Layout Light2</a> </li>
<li><a href="../../layout5/fullwidth/index.html">Layout Classic2</a> </li>
<li><a href="../../layout7/fullwidth/index.html">Layout Classic3</a> </li>
<li><a href="../../layout1/fullwidth/index.html">Layout Creative</a> </li>
<li><a href="../../layout6/fullwidth/index.html">Layout One Page</a></li>
<li class="dropdown-submenu mul"> <a tabindex="-1" href="#">Header Styles</a>
<ul class="dropdown-menu">
<li><a href="../../layout2/fullwidth/index.html">Header Style1</a> </li>
<li><a href="index.html">Header Style2</a> </li>
<li><a href="../../layout4/fullwidth/index.html">Header Style3</a> </li>
<li><a href="../../layout5/fullwidth/index.html">Header Style4</a> </li>
<li><a href="../../layout6/fullwidth/index.html">Header Style5</a> </li>
<li><a href="../../layout1/fullwidth/index.html">Header Style6</a> </li>
<li><a href="../../layout7/fullwidth/index.html">Header Style7</a> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"><b> dicas 4
</b>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="domain_search.html">Domain Search</a></li>
<li><a href="domain_transfer.html">Domain Transfer</a> </li>
</ul>
</li>
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"><b> dicas 5
</b>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="webhosting.html">Web Hosting</a></li>
<li><a href="dedicated_hosting.html">Dedicate Hosting</a> </li>
<li><a href="shared_hosting.html">Shared Hosting</a></li>
<li><a href="vps_hosting.html">VPS Hosting</a> </li>
<li><a href="reseller.html">Reseller Hosting</a> </li>
</ul>
</li>
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"><b> dicas 8
</b>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="webhosting.html">Web Hosting</a></li>
<li><a href="dedicated_hosting.html">Dedicate Hosting</a> </li>
<li><a href="shared_hosting.html">Shared Hosting</a></li>
<li><a href="vps_hosting.html">VPS Hosting</a> </li>
<li><a href="reseller.html">Reseller Hosting</a> </li>
</ul>
</li>
<!--end elements styles-->
<li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"><b> dicas14
</b>
</a>
<ul class="dropdown-menu multilevel" role="menu">
<li><a href="about.html">About Page</a></li>
<li><a href="website_builder.html">Website Builder</a></li>
<li><a href="affiliates.html">Affiliates</a></li>
<li><a href="services.html">Services Page</a></li>
<li><a href="team.html">Our Team</a></li>
<li><a href="whois.html">search whois</a></li>
<li><a href="awards.html">Awards</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="full-width.html">Full Width Page</a></li>
<li><a href="left-sidebar.html">Left Sidebar Page</a></li>
<li><a href="right-sidebar.html">Right Sidebar Page</a></li>
<li><a href="left-nav.html">Left Navigation</a></li>
<li><a href="right-nav.html">Right Navigation</a></li>
<li><a href="login.html">Login Form</a></li>
<li><a href="register.html">Registration Form</a></li>
<li><a href="404.html">404 Error Page</a></li>
</ul>
</li>
<li class="dropdown yamm-fw"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"><b>
dicas 100</b>
</a>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<ul class="col-sm-6 col-md-3 list-unstyled ">
<li>
<p> Elements 1 </p>
</li>
<li><a href="accordions.html"><i class="fa fa-plus-circle"></i> Accordions</a> </li>
<li><a href="image-hover.html"><i class="fa fa-picture-o"></i> Image Hovers</a> </li>
<li><a href="buttons.html"><i class="fa fa-bars"></i> Button Styles</a> </li>
<li><a href="call-to-action.html"><i class="fa fa-external-link-square"></i> Call to Action</a> </li>
<li><a href="carousel-sliders.html"><i class="fa fa-eye"></i> Carousel Sliders</a> </li>
</ul>
<ul class="col-sm-6 col-md-3 list-unstyled ">
<li>
<p> Elements 2 </p>
</li>
<li><a href="columns.html"><i class="fa fa-leaf"></i> Columns</a> </li>
<li><a href="lists.html"><i class="fa fa-list"></i> lists Styles</a> </li>
<li><a href="message-boxes.html"><i class="fa fa-tags"></i> Message Boxes</a> </li>
<li><a href="parallax-backgrounds.html"><i class="fa fa-cloud"></i> Parallax Backgrounds</a> </li>
<li><a href="pricing-tables.html"><i class="fa fa-rocket"></i> Pricing Tables</a> </li>
</ul>
<ul class="col-sm-6 col-md-3 list-unstyled ">
<li>
<p> Elements 3 </p>
</li>
<li><a href="tabs.html"><i class="fa fa-qrcode"></i> Tabs</a> </li>
<li><a href="typography.html"><i class="fa fa-font"></i> Typography</a> </li>
<li><a href="content-boxes.html"><i class="fa fa-flag"></i> Content Boxes</a> </li>
<li><a href="data-tables.html"><i class="fa fa-table"></i> Data Tables</a> </li>
<li><a href="social-icons.html"><i class="fa fa-twitter"></i> Social Icons</a> </li>
</ul>
<ul class="col-sm-6 col-md-3 list-unstyled ">
<li>
<p> Elements 4 </p>
</li>
<li><a href="icon-boxes.html"><i class="fa fa-pencil-square"></i> Icon Boxes</a> </li>
<li><a href="team-member.html"><i class="fa fa-user"></i> Team member</a> </li>
<li><a href="latest-posts.html"><i class="fa fa-thumbs-up"></i> Latest Posts</a> </li>
<li><a href="dividers.html"><i class="fa fa-file-text"></i> Dividers</a> </li>
<li><a href="widgets.html"><i class="fa fa-external-link"></i> Widget Styles</a> </li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul></nav>
</div>
</div>
</div>
</div>
</div>
<!-- end menu -->
</div>
</div>
</div>css :
ul.nav>li>a.active {
color:#fff;
background-color: #8c0000;/ border-bottom:2px solid #fe7e20;/
}
ul.nav>li>a:hover.active {
color:#000;
background-color: #fff;/border-bottom:0px solid #fe7e20;/
}
ul.nav>li>a:hover {
color:#fe7e20;
background-color: #fff
;
border-radius: 5px;
}.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}.yamm .container {
position: relative;
}.yamm .dropdown-menu {
left: auto;
}.yamm .nav.navbar-right .dropdown-menu {
left: auto;
right: 0;
}.yamm .yamm-content {
padding: 20px 30px;
}.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}.yamm .dropdown.yamm-hw .dropdown-menu {
left: auto;
right: 0;
width: 550px;
}.yamm .yamm-content .col-md-4, .yamm .yamm-content .col-md-8{
padding-right: 5px;
padding-left: 5px;
}.yamm .yamm-content .thumbnail { padding: 0; border: 0;}
.yamm .yamm-content .caption {
padding: 0;
}.yamm .yamm-content .caption h3 {
font-size: 18px;
color: #272727;
margin-top: 14px;
margin-bottom: 8px;
}.yamm .yamm-content .caption p {
font-size: 14px;
color: #727272;
}.list-unstyled li:first-child {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 12px;
}
.list-unstyled li p { font-size: 16px;
color: #272727;
font-weight: normal;
}.list-unstyled li i { color:#727272;}
.list-unstyled li { padding: 5px 0;}
.list-unstyled a {
color: #272727;
padding: 4px 8px;
width: 100%;
transition-property: margin-left, background-color;
transition-duration: 0.0s;
transition-timing-function: ease-out;
}.list-unstyled a:hover {
color: #272727;
background-color: #eee;
text-decoration: none;
margin-left: 8px;
transition-property: margin-left, background-color;
transition-duration: 0.0s;
transition-timing-function: ease-out;
border-radius: 3px;
}.list-unstyled a:before {
font-size: 12px;
margin-right: 5px;
}.row-border + .row .caption h3 {
margin-top: 0px;
}
.row-border {border-bottom: 1px solid #d1d1d1;
margin-bottom: 20px;
padding-bottom: 10px;
}@media (max-width:767px)
{
.list-unstyled li:first-child {
border-bottom: 0px ;
margin-bottom: 0px;
top-bottom: 15px;
}
.list-unstyled li p { font-size: 16px;
color: #bbb;
}
.list-unstyled li { padding: 8px 0;}
.list-unstyled a {
color: #bbb;
} color: #BBBBBB;
}.list-unstyled a {
color: #BBBBBB;
}
.list-unstyled a:hover {
color: #fff;
background-color: #666;
}
.yamm .yamm-content .thumbnail {
background-color: transparent;
-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.075);
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.075);
}
.yamm .yamm-content .caption p {
color: #ccc;
}
.yamm .yamm-content .caption h3 {
color: #ccc;
}
.yamm .yamm-content .thumbnail>img {
margin-left: 0;
}
.row-border {
border-bottom:0;
}
}@media (max-width:999px)
{
.list-unstyled a {
color: #BBBBBB;
}.list-unstyled li:first-child {
border-bottom: 1px solid #3b3b3b;
margin-bottom: 16px;
}.list-unstyled li p {
color: #fff;
padding-top:10px;
}.list-unstyled .img_left4 {
margin-right: 20px;
}
}
}/*
.navbar {
min-height:60px;
}*/
.navbar-nav>li>.dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
border: 0;
border-radius: 0;
}.navbar-nav>li>a {
padding-top: 22px;
padding-bottom: 22px;
text-transform: uppercase;
}.navbar-nav>li>a i {
display: block;
text-align: center;
}.navbar-default { margin-right: -32px; }
.dropdown-submenu {
position: relative;
}.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
;/ ;/
-webkit-border-radius: 0 ;
-moz-border-radius: 0 ;
border-radius: 0 ;
}.dropdown-submenu>.dropdown-menu:last-child {
}
@media (min-width:769px;){
.dropdown-submenu>.dropdown-menu:last-child {
border-top: 0px solid #000;
}
}.dropdown-submenu:hover>.dropdown-menu {
display: block;
}.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;
}
.navbar-brand {
/* background: url("../images/logo.png") no-repeat;
width: 162px;
height: 42px;
display: block;*/
padding: 0;
margin:15px 0;
}
.wrapper {
margin-top: 0px;
}.navbar-fixed-top +
.wrapper {
margin-top: 104px;
}
.dropdown-menu {
min-width: 220px;
}.dropdown-menu>li>a {
padding: 10px 20px;
border-bottom: 1px solid #e6e6e6;
}.dropdown-menu>li>a:hover {
border-bottom: 1px solid #e6e6e6;
}.dropdown-menu>li:last-child>a {
border-bottom: 0px solid #d1d1d1;
}/-------------- header animation Start -------------------/
.help {
height: 40px;
} padding-top: 10px;
}@media (max-width: 999px) {
.navbar-collapse.pull-right {
width: 100%;
/*float: none !important;*/
background: #1e1e1e;
}
#navbar-collapse-1 > ul > li.dropdown > a > b {
float: right;
}
.navbar-default .navbar-brand {
margin-left: 14px;
}
#navbar-collapse-1 > ul > li {
border-bottom: 1px solid #eee;
}
#navbar-collapse-1 > ul > li.open {
background-color: #2b2b2b;
}
.help
{
display: none;
}
.navbar-nav>li>a
{
color: #b3b3b3;
padding: 14px 15px;
}
.navbar-nav>li>a:hover
{
color: #fff ;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
color: #fe7e20;
background-color: transparent;
padding: 10px 20px;
border-bottom: 0px ;
}
.dropdown-menu>li>a {
padding: 8px 20px !important;;
border-bottom: 0px ;
}
.dropdown-submenu>.dropdown-menu:last-child {
border-top: 0px ;
}
}/*
.navbar-fixed-top .navbar-nav > li > a {padding-top: 15.666666666666666px; padding-bottom: 15.666666666666666px;}
.navbar-fixed-top .navbar-brand {margin-top: 3.666666666666666px; margin-bottom: 2.666666666666666px;}
.navbar-fixed-top .navbar-brand img {height: 34.666666666666664px;}
*/
/-------------- header animation End -------------------/
.navbar-nav>li>a
{
box-shadow: 0 0px 0 rgba(255,255,255,0.25);
}.callus { color: #545454; font-size: 13px; padding-top: 13px;}
.callus a { margin-right: 20px; color: #545454;}
.social-icons ul li {
float: left;
list-style-type: none;
margin:10px 0 10px 7px;
}.social-icons a {
width: 25px;
height: 25px;
display: block;
background-color:#fff;
border:1px solid #c7c7c7;
border-radius:50%;
text-align:center;
}.social-icons a i {
font-size:15px;
color:#272727;
line-height:24px;
text-align:center;
}.social-icons a:hover{
background-color:#272727;
border:1px solid #272727;
}.social-icons a:hover i{
color:#fff;
}@media (max-width: 999px) {
#navbar-collapse-1 > ul > li {
border-bottom: 0;
}
}{ cor da letras do menu }
.navbar-default .navbar-nav>li>a {
color: #fff;
font-size:14px;
}
.navbar-toggle {
position: relative;
float: none;
padding: 12px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 0;
background-color: transparent;
border: 0px solid transparent;
border-radius: 0;
margin-left: 15px;
background: #272727;
cursor: pointer;
}.navbar-toggle > span {Color:#fff;}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #272727;
}.navbar-collapse {border-top: 0;}
@media only screen and (min-width: 99px) and (max-width: 999px){
li.dropdown ul.dropdown-menu li a {color: #fff; }
li.dropdown a:hover {color: #fff; }
li.dropdown ul.dropdown-menu .yamm-content li a:hover {color: #454545; }
}
@media (min-width: 1000px) {
.yamm ul.nav li.dropdown > ul.dropdown-menu {
/*opacity: 0;
filter:alpha(opacity=100);*/
/* -webkit-transition: all 0.0s ease;
-moz-transition: all 0.0s ease;.dropdown-submenu:hover>.dropdown-menu
{
-webkit-animation-duration: 0.0s;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-fill-mode: forwards;
animation-duration: 0.0s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
-ms-animation-duration: 0.0s;
-ms-animation-name: fadeInFromNoneIE;
-ms-animation-fill-mode: forwards;
}.yamm ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
/*-webkit-transition: all 0.0s ease;
-moz-transition: all 0.0s ease;-o-transition: all 0.0s ease;*/
animation-duration: 0.0s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.0s;
-webkit-animation-name: fadeInFromNone;
-webkit-animation-fill-mode: forwards;
-ms-animation-duration: 0s;
-ms-animation-name: fadeInFromNoneIE;
-ms-animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInFromNone {
0% {
opacity: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
} opacity: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
} opacity: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
}/*.yamm ul.nav li.dropdown:hover > a {
color: #13afeb;
}*/
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
padding: 22px 18px;
}
}.navbar-toggle > button {
background: none;
border: 0;
float: right;
}.navbar-default .navbar-toggle i {
color: #fff;
font-size: 21px;
}.yamm ul.nav li.dropdown:hover b{
border-top-color: #fff;
border-bottom-color: #fff;
}.container>.navbar-collapse {margin-right: 0px;}
.navbar-brand, .navbar-nav>li>a {
text-shadow: 0 0px 0 rgba(255, 255, 255, 0.25);
}
button.navbar-toggle { clear: right;}.width50 {width: 50%;}
/ -------------- color Scheme Start --------------/
/*.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
color: #fff;
background-color: #454545;}*/
.navbar-default .navbar-nav>.open>a .caret, .navbar-default .navbar-nav>.open>a:hover .caret, .navbar-default .navbar-nav>.open>a:focus .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}/ -------------- color Scheme End --------------/
@media only screen and (min-width: 1000px) and (max-width: 1169px){
.dropdown-menu.two {
left:540px;
}.dropdown-menu.three {
left:450px;
}.dropdown-submenu>.dropdown-menu.four {
top: 0;
left:500px;
}.dropdown-menu.five {
left:400px;
}/*.navbar-default .navbar-nav > li > a {
font-size: 13px;
}*/
}
@media only screen and (min-width: 768px) and (max-width: 999px){
.navbar-default {margin-right: 20px;}
.navbar-nav>li>a i {
display: inherit;
text-align: left;
float: left;
margin: 5px 10px 0px 0px;
}
}@media only screen and (min-width: 480px) and (max-width: 767px){
.navbar-default {margin-right: 5px; }
.navbar-nav>li>a i {
display: inherit;
text-align: left;
float: left;
margin: 5px 10px 0px 0px;
}
}@media only screen and (max-width: 479px){
.navbar-default {margin-right: 3px;}
.navbar-nav>li>a i {
display: inherit;
text-align: left;
float: left;
margin: 5px 10px 0px 0px;
}
}Discussão (1)
Carregando comentários...