asked on

How to add rounded corners to css drop-down menu?

Hello everyone...

I'm working on a website for a local nonprofit and I'm having a challenge polishing up the theme I'm working with. I'm using wordpress for the site with the hopes that it will be easier for the nonprofit to work with the site on their own once I have it completed. I'm having problems getting rounded corners around the navigation drop downs. I was able to get the top corners rounded, but I'm having a difficult time figuring out how to get the bottom corners rounded.

Here's a section of the CSS that I'm working with.

.menu a, .menu a:visited {
      color: #fff;
      display: block;
      padding: 6px 6px 4px;
      margin-right: 6px;
}

.menu-item a:hover, .current-menu-item a, .current-post-parent a, .current_page_ancestor a {
      color: #fff;
      -moz-border-radius: 6px;
      border-radius: 6px;
      background: url(images/navigation-hover.png) repeat-x;
      -webkit-box-shadow: 0px 1px 3px #C21000;
      -moz-box-shadow: 0px 1px 3px #C21000;
      box-shadow: 0px 1px 3px #C21000;
}

.current-menu-parent ul.sub-menu li a, .current-menu-item ul.sub-menu li a {
      background-image: none;
      border: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
}

.menu li ul {
      z-index: 100;
      width: 200px;
      margin-left: 8px;
      margin-top: 0px;
      padding: 10px;
      background-color: #C21000;
      -webkit-box-shadow: inset 0px 2px 1px rgba(20,20,20,0.3);
      -moz-box-shadow: inset 0px 2px 1px rgba(20,20,20,0.3);
      box-shadow: inset 0px 2px 1px rgba(20,20,20,0.3);
      -webkit-border-top-left-radius: 9px;
      -moz-border-radius-topleft: 9px;

      -webkit-border-top-right-radius: 9px;
      -moz-border-radius-topright: 9px;
}

.menu li ul:last-child > a {
            -webkit-border-bottom-left-radius: 9px;
      -moz-border-radius-bottomleft: 9px;

      -webkit-border-bottom-right-radius: 9px;
      -moz-boder-radius-bottomright: 9px;
}

.menu li li a, .menu li li a:visited {
      color: #fff;
      width: 180px;
      float: none;
      margin-left: 0;
      margin-right: 0;
      padding: 8px 9px 7px;
}

.menu li li a:hover {
      color: #a0a0a0;
      background: transparent;
      background-image: none;
      border: none;
      padding: 8px 9px 7px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
}

.menu li ul li ul {
      width: 180px;
      margin-top: 0px;
      margin-left: 15px;
}

.menu li li li {
      color: #fff;
}

/* @end */

I've bolded where I added the code that I thought would do the trick. I am using the tutorial I found here (http://webdesignerwall.com/tutorials/css3-dropdown-menu) to see if I could get it to work.

As I mentioned the top looks fine, but the bottom still isn't rounded.

Can anyone help me figure out how to get get rounded corners on the bottom of the navigation drop downs?

The site in question is at http://www.realestatefraudawareness.com. It's a domain name I wasn't doing anything with so I'm using for my test/development site.

Thank you in advance for your help with this.

jeremyjared74

You can try the pure CSS three approach:

#nav {
	margin: 0;
	padding: 7px 6px 0;
	background: #7d7d7d url(images/gradient.png) repeat-x 0 -110px;
	line-height: 100%;
    width: 75%;
	border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
}


/* main level link */
#nav a {
	font-weight: bold;
	color: #e7e5e5;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;

	-webkit-border-radius: 1.6em;
	-moz-border-radius: 1.6em;
	
	text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
	background: #000;
	color: #fff;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
	background: #666 url(images/gradient.png) repeat-x 0 -40px;
	color: #444;
	border-top: solid 1px #f8f8f8;

	-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	box-shadow: 0 1px 1px rgba(0,0,0, .2);

	text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: #666;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}
#nav ul a:hover {
	background: #0078ff url(images/gradient.png) repeat-x 0 -100px !important;
	color: #fff !important;

	-webkit-border-radius: 0;
	-moz-border-radius: 0;

	text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
	display: block;
}

/* level 2 list */
#nav ul {
	display: none;

	margin: 0;
	padding: 0;
	width: 185px;
	position: absolute;
	top: 35px;
	left: 0;
	background: #ddd url(img/gradient.png) repeat-x 0 0;
	border: solid 1px #b4b4b4;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}

#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
	left: 181px;
	top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;

	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;

	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
} 
html[xmlns] #nav {
	display: block;
}
 
* html #nav {
	height: 1%;
}

Open in new window

Here is the source:
http://webdesignerwall.com/tutorials/css3-dropdown-menu

bobmillington

ASKER

Would this mess up any other aspects of the theme? My css skill are really low. I can stumble around css that is already there, but for me to go and develop it from start to finish I'd have a heck of time. Should I attach the complete style.css to this post? The theme creator used superfish for the dropdowns. I'm sure it's a nice tool, but the drop downs look awful. I am fine adding the css you suggested if you think it would still work with the other aspects of the style sheet.

Thank you Jeremy for jumping in here and helping me out. I can't tell you how much I appreciate the direction.

ASKER CERTIFIED SOLUTION

jeremyjared74

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

bobmillington

ASKER

That may do the trick. It still seems a bit "rough". The rounded edges are there, but the crisp clean look of the other navigation bar is gone. I may be able to work with it, lengthen it again, reposition it, and work with the colors again to get it right. I think between the two I may be able to get it looking somewhat professional.

Thank you again for all of your help and time on this. I think that will probably get me close to what I need. Have a great night/day!

bobmillington

ASKER

Thank you for all of the help on this. I appreciate having people who know what they are doing willing to help out those who are struggling.

jeremyjared74

You are welcome, and thanks for the kind words.