How can I make the botton menu of a drop down box have a corner

HTML & CSS
1

If I use a radius, then with the CSS I have, it gives all of the rungs a curved ending

This the CSS I am using

#nav a {
margin:0 4px 0 4px;
float:left;
padding:16px 14px;
text-transform:uppercase;
color: #ffff00;
font-weight: bold;
font-size: 12px;
}
/* Just sub menu links */
#subMenusContainer a, #nav li li a {
font-size: 12px;
text-align:left;
background-color:#000000;
padding:10px 20px;
color: #ffff00; ;

This is the page. www.c5d.co.uk

I have tried also giving the bottom line an ID, or a clas to no effect

Thanks

Antony

2

Hi Antony,

Add the following CSS to your stylesheet:

.sub-menu li:last-child a{
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

Useful links:

[LIST]
[]Border radius generator
[] Explanation of last-child psuedo-class
[/LIST]HTH

3

Hi, Antony,

On the stylesheet, c5ddropdownmenu.css, there are a couple of items that could be cleaned up a bit.

  1. The property, #nav li {height:90px}, is unnecessary and should be deleted. It is causing the clickable area for the horizontal menubar items to extend about 50px below the menubar. (You can tell by the pointy finger cursor.)

  2. #nav li:last-child only needs to contain those items that are different from the ones already listed in #nav li. In this case, the only one that is different is {background:none}. The other properties can be deleted from this selector.


#nav li {
    /*great place to use a background image as a divider*/
    cursor: pointer;
    float: left;
    margin: 0 ;
    padding: 1px;
    [color=red][s]height: 90px;[/s][/color]       /* DELETE.  Unnecessary. */
    display: inline;
    background: url(../images/nav-separator.png) right center no-repeat;
}
#nav li:last-child {
    /*remove divider from last menu item*/
    [color=red][s]cursor: pointer;[/s][/color]    /* DELETE.  Unnecessary duplication. */
    [color=red][s]float: left;[/s][/color]        /* DELETE.  Unnecessary duplication. */
    [color=red][s]margin: 0 ;[/s][/color]         /* DELETE.  Unnecessary duplication. */
    [color=red][s]padding: 1px;[/s][/color]       /* DELETE.  Unnecessary duplication. */
    [color=red][s]height: 90px;[/s][/color]       /* DELETE.  Unnecessary. */
    [color=red][s]display: inline;[/s][/color]    /* DELETE.  Unnecessary duplication. */
    background: none;
}

  1. The sixth list item, “P R Es”, has a left-over id of “dummy7”. You can safely delete that id. :slight_smile:

  2. Finally, the list item, “NZ” > “Order Form”, contains what I presume is a test id=“radius”. Don’t forget to delete it, too.

Noteworthy… you have done a smashingly nice job of cleaning out the unnecessary classes and ids from the c5dmenu.php menu file. It’s actually easy to read, now!

Cheers

4

Pullo, did you mean it as simply as it sounds ? Copy and Paste that CSS into the stylesheet ? I did that and it didn’t work. The corners are still square at the bottom.

Ron Pat, I have deleted the test IDs.

Thanks

Antony

5

[FONT=Verdana]Antony, find the following code on your cd5dropdownmenu.css file. (The following code assumes that you deleted the unnecessary styles from your css page as I mentioned earlier. If you did not, you can copy and paste these lines between the top and bottom reference comments on your page.)

Notice where Pullo’s styles are added. They work very nicely.

Line 85


/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
    /*border around submenu goes here*/
    background: none;
    left:0;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
#nav li {
    /*great place to use a background image as a divider*/
    cursor: pointer;
    float: left;
    margin: 0 ;
    padding: 1px;
    display: inline;
    background: url(../images/nav-separator.png) right center no-repeat;
}
#nav li:last-child {
    /*remove divider from last menu item*/
    background: none;
}
#subMenusContainer li {
    list-style: none;
}
[color=blue].sub-menu li:last-child a {                /* PULLO's styles are ADDED HERE */
    -webkit-border-bottom-right-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}[/color]
/* main menu ul or ol elment */

[/FONT]

6

Thanks. I had deleted what you said, but had posted the new CSS in the wrong place.

It works fine now

Thanks

Antony

7

Excellent! Glad to hear it’s working now.

Ron

8

[ot]As an aside, I was glad to read recently that it’s now recommended that vendor prefixes be removed on some CSS3 style attributes, such as border-radius, because of their full implementations in browsers:

I guess you could argue that keeping them supports older versions of modern browsers, but as they tend to auto update these days, I doubt that’s really much use any more.[/ot]