List styling

[jaswinder]

what i want to achieve is to have background on first-child of second ul .when i hover on it, it remain same, but if i hover on second li or any other li of second ul, the effect should be removed from first child

here what i did

` .nav-menu li:hover ul li:first-child { background-color:#FFF; } .nav-menu li:hover ul li:first-child a { color: #474646; } ‘ what to do next now.. i tried :not(:first child) and :not(:hover) can’t get the result.. may be using wrongly. any help ?

[Paulie_D]

Codepen example please?

[jaswinder]

http://cdpn.io/mjkal

when i hover on 2nd ul 2nd li.. both displays highlited.. i want to remove effect from 1st li of second ul..

apologies for such confusion .. thanks for reply

[Paulie_D]

Just remove this:

nav li:hover ul li:first-child
{
    background-color:#555;
}

http://codepen.io/Paulie-D/pen/wHBiC

[jaswinder]

No. I need that.
When i hover on options menu. Drop down will open with first child already highlited

but when i hover on its next list-item (li) i.e two . the effect will get remove from one and apply on two

i was trying
:not(:first-child)
but may be something wrong

[Paulie_D]

Drop down will open with first child already highlighted

Why would you do that…it’s not logical from a user’s point of view?

Anyway, as as far as I know, the only way to affect an element higher up the DOM (such as a previous list item) is with Javascript/JQuery.

Logically, you would give the first-child a class of say current and then remove it (and apply to to the hovered li) when the next li is hovered.

You might ALSO need a second function to restore the ‘current` state when the parent li is not longer hovered.

[jaswinder]

ok… so not possible with css only.. i have to try for javascript/jquery then

[Paulie_D]

Pretty sure it’s not possible with CSS.

If you wish I can pass the thread to the JS section so we can help you further?

[jaswinder]

ya sure.. it helps me

[Author]

Posts