Horizontálne CSS založené menu styling nefunguje - html, menu, css

Toto vodorovné menu používam už nejaký čas. Teraz v ňom chcem urobiť nejaké ďalšie zmeny

1. Chcem zvýrazniť nadradenú ponuku iba pri ovplyvnení kurzora myši, ak má podponuky. Ak použijem farbu pozadia, bude to platiť pre všetky nadradené ponuky v súčasnosti.
2. S CSS nie som dobrý a mám pocit, že to nie je správny spôsob, ako to robiť. Opravte ma, prosím, css, ak som nepoužil správne css.

Ukážkový odkaz na jsfiddle

Aktualizovať verziu: http://jsfiddle.net/sKDns/

Skúšal som rôzne spôsoby, ale nie som schopný sa k tomu dostaťsprávne. Ďalším problémom, ktoré mám v tejto ponuke, je to, že keď prejdem kurzorom na nadradenú položku ponuky, mierne sa posunie nadol o 2px alebo 3px (deje sa to iba v prehliadači Google Chrome, ale rovnako to funguje aj v IE 9 a FF).

Ocenil by som pomoc v tomto smere

<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>

odpovede:

Ak dobre rozumiem otázke, chcete iba to, aby nadradená položka ponuky mala pri vznášaní farbu pozadia, ak má podponuku.

Aktualizoval (-a) som svoje jsfiddle.

Nastavil som triedu li s podponukou na has-submenu.

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

Potom som aktualizoval pravidlo CSS tak, aby platilo iba pre túto triedu:

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

Dúfam, že to pomôže.Pokiaľ ide o problém s rôznymi prehliadačmi, kde je prvok v inej polohe, navrhol by som použiť niečo ako normalize.css. Normalizácia spôsobí, že základné štýly budú vo všetkých prehliadačoch rovnaké.

Upraviť: Len som chcel uviesť ďalšiu poznámku:všetky rozpätia medzi ponukami a ponukami majú rovnaké ID. Atribút ID by mal byť pre každý prvok na stránke jedinečný. V tomto scenári by bolo vhodnejšie použiť atribút triedy.