Question

I have an horizontal menu, which have a drop down menu on hover:

The HTML structure is like this:

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>

        <li><!-- DropDown-->
            <a href="#">Drop Down</a>
            <ul>
                <li><a href="#">Dd Item</a></li>
                <li><a href="#">Another One</a></li>
                <li><a href="#">Lalalal</a></li>
                <li><a href="#">Item</a></li>
            </ul><div class="clear"></div>
        </li>

    </ul><div class="clear"></div>
</div>

I am currently trying to round the bottom-left/right with the following CSS:

#menu ul li ul {
-khtml-border-radius-bottomright:8px;
-khtml-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
}

The problem is that the background of my <li> is interfering with the rounded borders of the <ul> and it looks ugly.

I did a jsFiddle so you can see the full code

Answer 1

The bottom corners of the li are showing outside the ul, because of the border radius on the ul and solid background of the li.

One way to fix it: Add the selector #menu ul ul li:last-child to your border styles. Use a class name on the last element instead if you want better browser support.

Demo: http://jsfiddle.net/5MLTu/1/

Another way: Add the style overflow:hidden to your current border styles for the <ul>.
Demo: http://jsfiddle.net/5MLTu/2/

Note: The above method only seems to work in Firefox, so don’t use it 🙂