By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,238 Members | 1,661 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,238 IT Pros & Developers. It's quick & easy.

Rounded list item on hover

KeredDrahcir
100+
P: 426
I'm using an unordered list as a navigation menu. The Main Menu needs to have rounded edges on the last item only. I can achieve that using the border-radius property on the ul tag and made the background colour of li tags transparent. I've run into a problem now that I need to specify a hover colour.

If I give the colour to the li item, the last item appears square and if I give the border radius to the hover property then all the others have a rounded bottom. Is there any way to give a rounded border for only the last list item?
Jul 5 '11 #1

✓ answered by Dormilich

you could use the CSS pseudo class :last-child (where supported) or just give the last item a class and tie the rounded corner to that class.

Share this Question
Share on Google+
4 Replies


Dormilich
Expert Mod 5K+
P: 8,639
you could use the CSS pseudo class :last-child (where supported) or just give the last item a class and tie the rounded corner to that class.
Jul 5 '11 #2

KeredDrahcir
100+
P: 426
I can't access the HTML so I'll have to try your first suggestion.
Do you know which browsers don't support it? I usually test in IE 6, 7 & 8, Firefox, Safari, Google Chrome and Opera.
Jul 5 '11 #3

Dormilich
Expert Mod 5K+
P: 8,639
according to quirksmode, every major browser except IE (< IE9)
Jul 5 '11 #4

KeredDrahcir
100+
P: 426
What a surprise (sarcasm). That shouldn't be a major problem.

It works like a charm in Firefox. Many thanks.
Jul 5 '11 #5

Post your reply

Sign in to post your reply or Sign up for a free account.