[Solved] NAV Menu help with CSS selector on list when hover – SOLVED

[AndersP]

Hello

I’m stuck and can’t figure this problem out and I need some fresh eyes to look at it.

I have created a menu and Im using a background image with a white frame when you hover over any of the menu subjects. So the white frame will show around the menu object when mouse is on it. However my problem is the same background image is also shown under each sub menu object which is not intentional. The frame should only be shown around the main menu.

http://codepen.io/anon/pen/bdBmZN

[Paulie_D]

However my problem is the same background image is also shown under each sub menu object as you can see.

Yes it would…because you haven’t specified a different background for each list item (or link or whatever).

I confess I’m not entirely sure what the problem is.

Frankly, I’m not sure why you are using an image there, it looks like something CSS could do for you.

[Paulie_D]

However you could use the direct descendant selector to only apply that image to top level links…is that what you meant?

.nav > ul > li:hover>  a
{
  background-image: url("http://i58.tinypic.com/140djyw.jpg");
  background-size: 100% 40px;
  background-repeat: no-repeat;
  background-position: center center; 
}

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

[AndersP]

Thanks for a quick answer.

I tried setting all list items to background-image: none with no success.

I tried making the box with CSS but using borders was a mess. Unless there is other options I havent thought off?

[AndersP]

Fantastic, that was exactly what I meant to do.

Thanks alot Paulie.

[Author]

Posts