css - Parent menu item hover while hovering submenu -

-

i have site http://jointviews.com/ header menu. header menu items , digital marketing has submenus under each. when hover dropdown submenu item parent menu background changing default one. should in hover position because here in submenus of particular menu item.

i tried giving 

li.current-menu-ancestor {   color: #fff;   background: #f29919; }

but didn't work

please help. thanks.

edit: code

<ul id="menu-main" class="menu"><li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-24"><a href="http://jointviews.com/">home</a></li> <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="http://jointviews.com/about-us/">about us</a> <ul class="sub-menu"> <li id="menu-item-267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a href="http://jointviews.com/testimonials/">testimonials</a></li> </ul> </li> <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://jointviews.com/digital-marketing/">digital marketing</a> <ul class="sub-menu"> <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://jointviews.com/digital-marketing/seo/">seo</a></li> <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://jointviews.com/digital-marketing/social-media-marketing/">social media marketing</a></li> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://jointviews.com/digital-marketing/email-marketing/">email marketing</a></li> <li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="http://jointviews.com/digital-marketing/sem/">sem</a></li> <li id="menu-item-281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="http://jointviews.com/digital-marketing/content-marketing/">content marketing</a></li> </ul> </li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://jointviews.com/portfolio/">portfolio</a></li> <li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258"><a href="http://jointviews.com/blog/">blog</a></li> <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"><a href="http://jointviews.com/contact-us/">contact us</a></li> </ul>

css:

ul.sub-menu{position:relative; z-index:40;} ul#menu-main ul { display: none; }   ul#menu-main li:hover > ul {     display: block;background-color: #fff; } ul#menu-main {    position: relative; display: inline-table; top: 42px; position: relative; float:right; margin-bottom: 0px; clear: both; padding: 0 0 0 20px; background: transparent!important; list-style: none; height: 60px; font-family: bebasneueregular, helvetica, arial narrow, sans-serif; font-size: 18px; }  ul#menu-main:after {     content: ""; clear: both; display: block;  }  ul#menu-main li { float: left; line-height: 60px;     z-index: 40; margin-left: 15px; }       ul#menu-main li a:hover {         color: #fff; background: #f29919;      } ul#menu-main ul li{ border-bottom:1px solid #eee;}  ul#menu-main ul li a:hover {         color: #818181; background: #eee;      }    ul#menu-main li {     display: block;     font-family: bebasneueregular, helvetica, arial narrow, sans-serif;     padding: 0 20px;         color: #818181;         text-decoration: none; } ul#menu-main ul {  border-radius: 0px; padding: 0; position: absolute; top: 100%; }  ul#menu-main ul li {     float: none;       position: relative; list-style:none; /*width: 180px;*/ line-height: 37px; margin-left: 0px; }ul#menu-main ul li:first-child{border-top: 1px solid white;}           ul#menu-main ul ul li a:hover {             color:white;         }  ul#menu-main ul ul { position: absolute; left: 100%; top:-1px; } ul#menu-main li.current-menu-item > a{ color: #fff; }   ul#menu-main ul ul li:hover a{     color: #333333; }

fiddle

change

 ul#menu-main li a:hover { ... }

to 

 ul#menu-main > li:hover > { ... }

the > operator choose first level children of corresponding element.

edit: edited change previous answer, current 1 better solution minimum effort.

edit2: removed element put there accidentally.


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more