CODEWITHSUNDEEP
csshtml-listswordpress-theming
Reece
Reece

Reputation: 797

CSS issue with UL > LI > LI

On a website I'm trying to complete, I'm having some trouble getting the CSS right for the main navigation menu.

When a menu item has child pages, the drop-down for those is supposed to be a solid colour with no border, but have round corners on the bottom and also have a drop shadow.

I've got it mostly right, but the middle link (LI) is getting the same round corners as the last LI and I cannot figure out why.

I've also noticed that my menu's LI hovers are not getting the round corners where they're supposed to be.

The site is http://landtrecruitment.com.au.

Thanks

Upvotes: 0

Views: 212

Answers (1)

Falguni Panchal
Falguni Panchal

Reputation: 8981

enter image description here

try this

.menu ul > li + li{
    border: 0 solid #333333;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}

please add + li in this above css

.menu ul > li + li + li{
    border: 0 solid #333333;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}

OR

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-last-child

 .menu ul  li:nth-last-child(1)

    {
      border: 0 solid #333333;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);}

Upvotes: 3

Related Questions