CSS3 drop down menu styling

Question

I have these drop down menus HERE created using CSS on the Products, Support and Community nav links. The drop down menus have rounded corners on the bottom. The hover effect on the last link overrides the rounded corner and squares it off which I do not want. I would like the rounded corners to remain even on the hover on the last bottom link of the drop down. I think I need a property of overflow:hidden (?) on one of the styles but I've tried everything and I can't get it to work properly. What am I missing?

The CSS is HERE.

Thanks!

Dmiller89 · Accepted Answer · 2013-06-25 16:49:32Z

1

The issue is that the border-radius property doesn't change the boundaries of the <ul> element, rendering overflow: hidden; useless when the <li> elements get a background color.

My solution would be to apply border-radius: 0px 0px 8px 8px; to each of the bottom <li> elements in your drop-down menus.

answered Jun 25, 2013 at 16:49

Dmiller89

1263 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kim Over a year ago

That did it! I added the border-radius to the last-child and it works great now, thanks!

Tom Pietrosanti · Accepted Answer · 2013-06-25 16:52:15Z

0

Try setting overflow: hidden; on .menu ul

answered Jun 25, 2013 at 16:52

Tom Pietrosanti

4,3042 gold badges27 silver badges30 bronze badges

Comments

conceptdeluxe · Accepted Answer · 2013-06-25 16:52:23Z

0

CSS Border Radius is not inherited from its parent as you can see in this fiddle:

http://jsfiddle.net/sZtHk/

HTML

<div class="outer">
    <div class="inner"></div>
</div>

CSS

.outer {
    background: #ff0000;
    width: 100px;
    height: 100px;
    border-radius: 24px;
}

.inner {
    background: rgba(0, 0, 0, .25);
    width: 100px;
    height: 100px;
}

answered Jun 25, 2013 at 16:52

conceptdeluxe

3,9033 gold badges28 silver badges32 bronze badges

Comments

Michael · Accepted Answer · 2013-06-25 16:52:27Z

0

You need to apply the borderadius that you have on your <ul> to the last link item. If your hover state is controled by the <a> tag then you need to apply it there also.

.menu ul li:last-child { border-radius: 0px 0px 8px 8px; }

You may also, or alternatively need this:

.menu ul li:last-child a { border-radius: 0px 0px 8px 8px; }

answered Jun 25, 2013 at 16:52

Michael

7,1022 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

CSS3 drop down menu styling

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related