Horizontal Menu nth-child selector not responding

[Ehcho]

Hi all,

I have been using WordPress to build my website and have inserted my menu in by using the “wp_nav_menu()” function.

I had a vertical menu where the background colours were changed depending on which nth-child was selected which worked great. However, as soon as I switched the menu to horizontal and placed it in the header.php file, the child selectors stopped working.

Here’s a link to a screenshot of what my navigation looks like: Click Here. (The grey link represents the hover effect).

My code is below, maybe I’m doing something silly.

nav ul { float: left; }



nav ul li { display: inline; }



nav ul li a {

height: 20px;

width: 121px;

padding: 10px 10px 10px 15px;

color: #000;

font-size: 18px;

font-family: Georgia, Arial, Sans-serif;

float: left;

text-decoration: none;

font-weight: bold;

text-align: center;

background: #b5ecff;

}



nav ul li:nth-child(1) { background: #b5ecff; }

The navigation is placed in the header.php file and the nth-child selectors go all the way up to 7 (with different colours in them), if that’s important information.

Thanks a lot,
Morgan

[wolfcry911]

You’ve used the same color background for the first child as all the anchors? If you were to change the color, it still may not show depending on whether or not the first li contains an anchor. You really need to give more information for a better answer.

[TheDoc]

Also, you’re applying a background color the the anchor, and then you’re giving the first li a different background color, but it’ll just get overwritten by whatever the anchor background is.

[Author]

Posts