http://zorpstudio.cl/cloverdale/
el problema es que cuando me muevo hacia los submenus el menu principal deja de estar en hover
la idea seria que al moverse dentro de los submenus el principal se mantenga como en hover
Código HTML :
<nav> <ul id="mainmenu"> <li id="horizontal"> <a href="#" class="vision">Vision</a> <ul style="" id="SubMenuY2" class="submenu"> <li><a href="vision_architect.html">Architect</a></li> <li><a href="vision_developer.html">Developer</a></li> <li><a href="vision_sales.html">Sales & Marketing</a></li> </ul> </li> <li id="horizontal" class=" "> <a class="gallery" href="#">Gallery</a> <ul style="" id="SubMenuY2" class="submenu"> <li><a href="gallery_neighborhood.html">Neighborhood</a></li> <!-- <li><a href="gallery_finish_close_up.html">Finish close ups</a></li>--> <li><a href="gallery_model_unit.html">Model Unit</a></li> <li><a href="gallery_building_exterior.html">Building exterior</a></li> </ul> </li> <li id="horizontal" class=" "> <a class="residences" href="#">Residences</a> <ul style="" id="SubMenuY2" class="submenu"> <li><a href="residences_intro.html">Intro</a></li> <li><a href="residences_floor_plans.html">Floor Plans</a></li> <li><a href="residences_interiors.html">Interiors</a></li> <li><a href="residences_building_amenities.html">Building Amenities</a></li> </ul> </li> <li id="horizontal" class=" "> <a class="neighborhood" href="#">Neighborhood</a> <ul style="" id="SubMenuY2" class="submenu"> <li><a href="neighborhood.html">Miracle Mile</a></li> <li><a href="neighborhood_map.html">Neighborhood Map</a></li> </ul> </li> <li id="horizontal" class=" "> <a class="contact" href="#">Contact</a> <ul style="" id="SubMenuY2" class="submenu"> <li><a href="contact_interest.php">Interest list sign up</a></li> <li><a href="contact_map.html">Location/Contact info</a></li> <li><a href="contact_preferred_lender.html">Preferred Lender (PQ Form)</a></li> </ul> </li> </ul> </nav>
Código CSS :
#mainmenu {
margin: 0;
padding: 0;
list-style-type: none;
filter:alpha(opacity=99);-moz-opacity:.99;opacity:.99;
}
#mainmenu li {
clear: left;
}
#mainmenu a {
display: block;
overflow: hidden;
float: left;
}
.active {
height:100px;
}
.submenu {
list-style-type: none;
float: left;
display: none;
}
#mainmenu li a:hover+.submenu, .submenu:hover {
display: block;
}
.submenu li {
display: inline;
clear: none !important;
}
.submenu li a {
float: left;
margin-left: 10px;
}
#mainmenu #horizontal a {
font-family: 'Raleway', sans-serif !important;
font-weight:300;
font-size: 25px;
color:#FFF;
margin-left:43px;
text-decoration:none;
line-height:30px;
letter-spacing:-0.02em;
cursor: default;
height:30px;
}
#mainmenu #horizontal .vision {
height:30px;
width:111px;
text-indent: -5000px;
background-image:url(images/btns/vision.png);
}
#mainmenu #horizontal .vision:hover {
height:30px;
width:111px;
background-image:url(images/btns/vision_over.png);
}
#mainmenu #horizontal .gallery {
height:30px;
width:115px;
text-indent: -5000px;
background-image:url(images/btns/gallery.png);
}
#mainmenu #horizontal .gallery:hover {
height:30px;
width:115px;
background-image:url(images/btns/gallery_over.png);
}
#mainmenu #horizontal .residences {
height:30px;
width:170px;
text-indent: -5000px;
background-image:url(images/btns/residences.png);
}
#mainmenu #horizontal .residences:hover {
height:30px;
width:170px;
background-image:url(images/btns/residences_over.png);
}
#mainmenu #horizontal .neighborhood {
height:30px;
width:200px;
text-indent: -5000px;
background-image:url(images/btns/neighborhood.png);
}
#mainmenu #horizontal .neighborhood:hover {
height:30px;
width:200px;
background-image:url(images/btns/neighborhood_over.png);
}
#mainmenu #horizontal .contact {
height:30px;
width:130px;
text-indent: -5000px;
background-image:url(images/btns/contact.png);
}
#mainmenu #horizontal .contact:hover {
height:30px;
width:130px;
text-indent: -5000px;
background-image:url(images/btns/contact_over.png);
}
/*#mainmenu #horizontal a:hover {
background-color: #f2f2f2;
color:#484549;
font-weight:500;
}*/
#mainmenu #SubMenuY2 a {
font-family: 'Raleway', sans-serif!important;
font-weight: 300;
background-color: #ffffff;
color:#484549;
font-size: 13px;
width: auto;
margin: auto;
padding: 0 15px;
cursor: pointer;
text-align:center;
}
#mainmenu #SubMenuY2 a:hover {
font-weight: 500;
text-align:center;
font-size: 13px;
width: auto;
margin: auto;
}
me dijeron por ahi que con este scrip deberia funcionar pero nada
Código :
<script type="text/javascript">
$('#mainmenu li').hover(
function(){
$(this).children('a').addClass('itemOver');
$(this).children('ul').show();
},function(){
$(this).children('a').removeClass('itemOver');
$(this).children('ul').hide();
}
);
</script>
yo creo que por ahi va la cosa pero no logro hacerlo funcionar!!
gracias por la ayuda!!!
