html - Horizontal CSS based menu styling not working -


i have been using horizontal menu time want make more changes it

  1. i want highlight parent menu on hover affect if has submenus. if apply background color applies parent menus @ present.
  2. i not css & feel not right way of doing it. please correct me css if have not applied right css.

example link @ jsfiddle

update version: http://jsfiddle.net/skdns/

i tried different ways not able right. issue have menu when hover on parent menu item mover down 2px or 3px (this happens in google chrome same works fine in ie 9 & ff).

i appreciate in regard

<div id="nav-wrapper">     <ul class="dropdown dropdown-linear" id="nav">         <li class="active"><span class="dir"><a href="#">home</a></span><span id="menus-spacer">|</span></li>         <li><span class="dir"><a href="#">about us</a></span><span id="menus-spacer">|</span></li>         <li><span class="dir"><a href="#">issue</a></span><span id="menus-spacer">|</span></li>         <li><span class="dir"><a href="#">categories</a></span><span id="menus-spacer">|</span>             <ul>                 <li><a href="#">politics</a><span id="menus-spacer">|</span></li>                 <li><a href="#">feature</a><span id="menus-spacer">|</span></li>                 <li><a href="#">economy</a><span id="menus-spacer">|</span></li>                 <li><a href="#">feature</a><span id="menus-spacer">|</span></li>                 <li><a href="#">business</a><span id="menus-spacer">|</span></li>             </ul>         </li>            <li><span class="dir"><a href="#">archive</a></span><span id="menus-spacer">|</span></li>         <li><span class="dir"><a href="#">news</a></span><span id="menus-spacer">|</span></li>     </ul> </div>

if understand question correctly, want parent menu item have background color on hover if has submenu.

i've updated jsfiddle.

i set class of li submenu has-submenu.

<li class="has-submenu"><span class="dir"><a href="#">categories</a></span><span id="menus-spacer">|</span>

then updated css rule apply class:

ul.dropdown li.has-submenu:hover > *.dir {       background-color:#f1f1f1; }

i hope helps. cross-browser issue, element in different position, suggest using normalize.css. normalize make base styles same across browsers.

edit: wanted provide additional note: menu-spacer spans have same id. id attribute should unique each element on page. in scenario more appropriate use class attribute.


Comments

Post a Comment