Suckerfish Rounded Corners

While using the Sons of Suckerfish dropdown menu on a website recently, the need for a drop-down menu with rounded corners came up. No information came up Googling this, but the following simple solution worked, so I thought I would post it to share with others looking for an answer.

1. Create an image file that has rounded corners on the bottom left and right corners, and is long enough to contain your longest dropdown list. Here is an example that you are welcome to use:
   
2. Modify your CSS for the second level list (e.g. #nav li ul if using the same naming scheme as in this Sons of Suckerfish article):

   #nav li ul {
   	position: absolute;
   	width: 140px; /* Set a fixed width */
   	left: -999em;
   	background: url("/img/roundcorners.gif") bottom left no-repeat; /* Select your image file. */
   }
   

You sacrifice a fluid menu layout, but the rounded corners on a drop down produces a pleasant effect. See Avatar Languages for a live example.

Hopefully, this is useful for someone. Please let me know if you have used this successfully or have found another method!

Related Posts

• The First Things to Consider When Coding Your Website

This entry is filed under Coding. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.