javascript - Separate activation of <span> inside <li> of JQuery Menu -


i wondering if can have separate element(<span>) on <li> using jquery menu, default style activating entire <li> , need have activate <span> being hover/focus user. possible or can guide me on should start?

<ul id="menu">   <li>a</li>   <li>b     <ul>       <li><span>b - 1.1</span><span>b - 1.2</span></li>       <li><span>b - 2.1</span><span>b - 2.2</span></li>     </ul>   </li>   <li>c</li> </ul> 

see fiddle demo activates b - 1.1 , b - 1.2 simultaneously.

does kinda work you:

.ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span {background: #fff;} .ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span:hover {background: transparent;} 

fiddle: https://jsfiddle.net/s7z9dpdd/

tried version padding:

.ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span {background: #fff; display: inline-block; margin: -5px 0; padding: 5px 0;} .ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span:hover {background: transparent;} 

fiddle: https://jsfiddle.net/fjmfk7qb/

final masterpiece

.ui-menu { width: 150px; } .ui-menu .ui-menu {width: auto;} .ui-menu .ui-menu > .ui-menu-item {padding: 0; width: auto; white-space: nowrap;} .ui-menu .ui-menu > .ui-menu-item > span {background: #fff; display: inline-block; padding: 5px 0;} .ui-menu .ui-menu > .ui-menu-item.ui-state-focus > span:hover {background: transparent;} 

fiddle: https://jsfiddle.net/6p8trnnn/


Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -