Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2011-03-18
6
Medium Priority
?
591 Views
Last Modified: 2012-05-11
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.
0
Comment
Question by:bobmillington
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35170133
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
0
 

Author Comment

by:bobmillington
ID: 35170257
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.
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 2000 total points
ID: 35170347
I don't think it will mess anything up. I have added the css in firebug and taken a screenshot so you can see how it will look. It did move the RSS icon, but I repositioned it for you. You may want to back up your CSS just in case.

Here is you complete CSS file with the navigation added:
/* 
	Theme Name: Foundation
	Theme URL: http://www.organizedthemes.com/foundation
	Description: An excellent theme for your non-profit
	Author: Organized Themes
	Author URI: http://www.organizedthemes.com
	Version: 1.0.3
	Tags: clean, slideshow, video, widgets, control panel
	
*/

/* Licensed under GNU General Public License.  Learn more at www.opensource.org */

/* @group Reset */

/* Eric Meyer's Reset Reloaded */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}:focus {outline: 0;}ins {text-decoration: none;}del {text-decoration: line-through;}table {border-collapse: collapse;border-spacing: 0;}
/* @end */

/* @group Type */

/* Define Fonts */

h1, h2, h3, h4, h5, h6 {
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

body, p, li, ol, ul, span, div, label, legend, form, fieldset, input {
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif; line-height: 1.2; 
}

h1 { font-size: 36px; line-height: 1; margin-bottom: 8px; }
h2 { font-size: 24px; line-height: 1; margin-bottom: 12px; }
h3 { font-size: 20px; line-height: 1; margin-bottom: 12px; }
h4 { font-size: 18px; line-height: 1; margin-bottom: 20px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0;}

p  			{ margin: 0 0 24px;	font-size: 14px; padding-bottom: 5px; }
p img.left  { float: left; margin: 24px 24px 24px 0; padding: 0; }
p img.right { float: right; margin: 24px 0 24px 24px; }

strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 24px; font-style: italic; }
del         { color:#666; }

li ul, 
li ol       { margin: 0 24px; }
ul, ol      { margin: 0 24px 24px; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 24px; }
dl dt       { font-weight: bold; }
dd          { margin-left: 24px;}

blockquote p {
	padding: 8px 8px 8px 20px;
	background-color: #fffeff;
	border-left: 5px solid #808080;
	margin: 20px;
}

/* @end */

/* @group Global */

body 			{ background: #ababab url(images/background.png) repeat center top}

#wrap { 
	width: 960px;
	margin: 0 auto;
	position: relative;
}

a, a:visited 	{ color: #3d56d3; text-decoration: none;  }
a:hover 		{ color: #233488; }

.left 			{ float: left; }
.right 			{ float: right; }
.clear 			{ clear: both; }

.clearfix:after { content: "."; display: block; clear: both; margin: 0; padding: 0; height: 0; visibility: hidden; }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.clearfix { height: 1%; }


.shadow {
	-webkit-box-shadow: 0px 1px 3px #141414;
	-moz-box-shadow: 0px 1px 3px #141414;
	box-shadow: 0px 1px 3px #141414;
}

.shadow-little {
	-webkit-box-shadow: 0px 1px 3px #ccc;
	-moz-box-shadow: 0px 1px 3px #ccc;
	box-shadow: 0px 1px 3px #ccc;
}

.fade:hover {
	filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

/* @end */

/* @group Header */

#header {
	position: relative;
	height: 140px;
	z-index: 200;
}

#logo {
	position: absolute;
	z-index: 20;
	top: 22px;
}

#text-logo {
	position: absolute;
	z-index: 20;
	top: 22px;
}

#text-logo h1 a, #text-logo h1 a:visited, #text-logo p a, #text-logo p a:visited {
	color: #000;
	font: 40px "Copperplate Gothic Bold";
	text-shadow: rgba(33,33,33,0.7) 1px 1px 3px;
}

#tagline {
	position: absolute;
	right: 0;
	top: 75px;
}

#tagline h2, #tagline p {
	font-style: italic;
	font-weight: normal;
	font-size: 18px;
	margin-bottom: 0;
}



#nav-left {
	float: left;
	display: inline;
}

#nav-right {
	position: relative;
	float: right;
	display: inline;
	padding-top: 4px;
	margin-right: 5px;
}

#nav-right em {
	position: relative;
	top: -9px;
	margin-right: 6px;
}

#nav-right a:hover img {
	position: relative;
	top: -1px;
	-webkit-box-shadow: 0px 1px 3px #C21000;
	-moz-box-shadow: 0px 1px 3px #C21000;
	box-shadow: 0px 1px 3px #C21000;
}

/* @group Superfish Drop Downs--do not edit */



/* @end 


/* @end */

/* @group Home */

#home-top, #page {
	margin-top: 16px;
	position: relative;
	z-index: 1;
}

#slideshow {
	float: left;
	display: inline;
	width: 630px;
	position: relative;
	z-index: 1;
}

#slider {
	position:relative;
	z-index: 1;
	margin: 0; 
	padding: 0;
	overflow: hidden;
	width: 630px;
	height: 420px;
	background:#ccc url(images/building.jpg) no-repeat 50% 50%;
}

#top-sidebar {
	float: right;
	display: inline;
	width: 300px;
}

#action-bar {
	height: 58px;
	margin-top: 22px;
	position: relative;
	background-image: url(images/newsletter-bar-2.png);
}

h4.action-title {
	position: absolute;
	top: 14px;
	left: 3px;
	font-style: italic;
	color: #fff;
	font-size: 27px;
	text-shadow: rgba(29,29,29,0.64) 1px 1px 0;
}

p.action-description {
	position: absolute;
	left: 256px;
	top: 14px;
	color: #fff;
	font-size: 13px;
}

.action-form {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 401px;
	height: 49px;
}

.action-form #email {
	position: absolute;
	border: none;
	right: -9px;
	width: 278px;
	overflow: hidden;
	padding: 17px 113px 10px 10px;
	font-size: 20px;
	background: transparent;
}

.action-form input.btn, #donate form h4 a {
	position: absolute;
	right: 7px;
	top: 5px;
	background-color: #3d56d3;
	border: none;
	color: #fff;
	font-size: 20px;
	padding: 7px 14px;
	cursor: pointer;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0px 1px 3px #141414;
	-moz-box-shadow: 0px 1px 3px #141414;
	box-shadow: 0px 1px 3px #141414;
	text-shadow: rgba(29,29,29,0.64) 1px 1px 0;
    -webkit-appearance: none;
}

.action-form input.btn:hover, #donate form h4 a:hover {
	text-shadow: none;
	background-color: #233488;
}

#notification {
	position: absolute;
	width: 394px;
	right: 4px;
	top: 61px;
	z-index: 20;
	font-size: 12px;
	font-style: italic;
}

#donate-bar {
	height: 58px;
	margin-top: 22px;
	position: relative;
	background: url(images/donation-bar.png) no-repeat;
}

#donate-title h4 {
	position: absolute;
	top: 18px;
	left: 7px;
	font-style: italic;
	color: #fff;
	font-size: 20px;
	text-shadow: rgba(29,29,29,0.64) 1px 1px 0;
	margin-bottom: 0;
}

#donate-graph-holder {
	position: absolute;
	top: 5px;
	left: 250px;
	width: 506px;
}

#donate-graph-base {
	position: absolute;
	top: 0;
	width: 506px;
	height: 46px;
	z-index: 2;
	background: url(images/progress-bar.png) center -9px;
}

#donate-graph-highlight {
	position: absolute;
	z-index: 1;
	background-color: #3d56d3;
	height: 39px;
	left: 1px;
	top: 5px;
}

#donate-description {
	position: absolute;
	z-index: 3;
	top: 16px;
	left: 22px;
	width: 460px;
	color: #fff;
	text-align: center;
	text-shadow: rgba(29,29,29,0.64) 1px 1px 0;
}

#donate-end p {
	font-size: 20px;
	position: absolute;
	z-index: 5;
	right: -62px;
	top: 12px;
	margin-bottom: 0;
	color: #fff;
	text-shadow: rgba(29,29,29,0.64) 1px 1px 0;
}

#donate form h4 a {
	font-weight: normal;
	font-style: normal;
	padding-top: 11px;
	padding-bottom: 11px;
	top: 8px;
}

#home-widgets {
	margin-top: 22px;
	margin-right: -30px;
}

#home-widgets .widget {
	float: left;
	display: inline;
	margin-right: 30px;
}

#home-posts {
	float: right;
	display: inline;
	width: 630px;
	margin-right: 30px;
}

.post-highlight {
	margin-bottom: 20px;
}

.post-highlight img {
	padding: 5px;
	float: left;
	display: inline;
	margin-right: 15px;
	background-color: #fff;
	-webkit-box-shadow: 0px 1px 3px #ccc;
	-moz-box-shadow: 0px 1px 3px #ccc;
	box-shadow: 0px 1px 3px #ccc;
}

/* @end */

/* @group Page Styles */

.page-left {
	float: left;
	display: inline;
}

.page-right {
	float: right;
	display: inline;
}

#page-full {
	padding: 1px;
}

#content {
	width: 630px;
}

#sidebar {
	width: 300px;
}

.post {
	margin-bottom: 20px;
	border-bottom: 1px solid #b8b8b8;
}

p.post-meta {
	font-size: 11px;
	margin-bottom: 8px;
}

.attachment-single {
	margin-bottom: 20px;
	float: right;
	-webkit-box-shadow: 0px 1px 3px #ccc;
	-moz-box-shadow: 0px 1px 3px #ccc;
	box-shadow: 0px 1px 3px #ccc;
}

/* @end */

/* @group Widgets */

#sidebar, #sidebar p, #sidebar li {
	font-size: 14px;
}

.fb-widget {
	margin: -5px;
}

.widget {
	width: 290px;
	margin-bottom: 20px;
	background-color: #fff;
	padding: 5px;
}

h4.widgettitle {
	color: #fff;
	background-color: #474747;
	margin-top: -5px;
	margin-right: -5px;
	margin-left: -5px;
	padding: 5px;
}

.widgettitle a, .widgettitle a:visited {
	color: #fff;
}

.widget p {
	margin-bottom: 5px;
}

.widget object, .widget embed {
	width: 290px;
}

.ot-newsletter {
	position: relative;
}

.ot-newsletter #email {
	font-size: 14px;
	width: 185px;
	background-color: #efefef;
	padding-top: 8px;
	padding-bottom: 8px;
	position: relative;
	left: 3px;
}

.ot-newsletter #email:focus, .action-form #email:focus {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.ot-newsletter input.btn, input#searchsubmit, .donate h4.btn a{
	position: relative;
	right: 0;
	background-color: #3d56d3;
	border: none;
	color: #fff;
	font-size: 14px;
	padding: 7px 14px;
	cursor: pointer;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0px 1px 3px #141414;
	-moz-box-shadow: 0px 1px 3px #141414;
	box-shadow: 0px 1px 3px #141414;
	text-shadow: rgba(29,29,29,0.64) 1px 1px 0;
    -webkit-appearance: none;
}

.ot-newsletter input.btn:hover, input#searchsubmit:hover, .donate h4.btn a:hover {
	text-shadow: none;
	background-color: #233488;
}

#widget-notification {
	position: absolute;
	bottom: -17px;
	font-size: 12px;
	font-style: italic;
}

.widget label.screen-reader-text {
	display: none; /* hides search in search widget */
}

input#s {
	font-size: 14px;
	padding: 7px 14px;
	border: none;
	background-color: #efefef;
	width: 165px;
	margin-right: 10px;
}

.donate p {
	float: left;
	display: inline;
	width: 200px;
}

.donate h4.btn  {
	float: right;
	display: inline;
	margin-top: 9px;
}

/* @end */

/* @group Staff Pages */

.staff-page {
	margin-bottom: 0px;
}

.staff-page h1 {
	margin-top: 10px;
	margin-bottom: 13px;
}

.staff-member {
	margin-bottom: 20px;
}

.staff-picture {
	float: left;
	display: inline;
	width: 220px;
}

.staff-picture img {
	padding: 5px;
	background-color: #fff;
	-webkit-box-shadow: 0px 1px 3px #ccc;
	-moz-box-shadow: 0px 1px 3px #ccc;
	box-shadow: 0px 1px 3px #ccc;
}

.email, .twitter-link, .facebook-link {
	margin-right: 10px;
}

.staff-details {
	float: right;
	display: inline;
	width: 370px;
}

.staff-details p {
	font-size: 14px;
	margin-bottom: 12px;
}

p.staff-meta {
	margin-bottom: 2px;
	font-style: italic;
}

p.staff-contact {
	margin-bottom: 0px;
	color: #2e3e48;
}

#staff-image-contact {
	float: left;
	display: inline;
	width: 400px;
	padding: 5px;
	background-color: #c8c8c8;
	font-size: 12px;
}

#staff-image-contact a:hover {
	color: #000;
}

#staff-single-details {
	float: right;
	display: inline;
	width: 500px;
}

#staff-image-contact h4 {
	color: #000;
	margin-bottom: 5px;
	margin-top: 4px;
}

#staff-image-contact p, #staff-image-contact a, #staff-image-contact a:visited {
	font-size: 14px;
	margin-bottom: 0;
	color: #444;
}

#staff-image-contact a:hover {
	color: #60748c;
}

img.attachment-staff-full {
	border: none;
	padding: 0px;
}

/* @end */

/* @group Footer */

#footer {
	width: 960px;
	margin: 20px auto;
	padding: 10px 0 0;
	border-top: 1px solid #b8b8b8;
}

#footer p, #footer a, #footer a:visited {
	color: #4a4a4a;
}

#footer-left {
	width: 400px;
	display: inline;
	float: left;
}

#footer-right {
	width: 400px;
	display: inline;
	float: right;
	text-align: right;
}

/* @end */

/* @group Comments */

ol#commentlist {
	list-style: none;
	margin-left: 0;
}

.comment-container {
	margin-bottom: 20px;
	background-color: #fafafa;
}

.comment-author-bar {
	float: left;
	display: inline;
	width: 110px;
	margin-right: 20px;
	background-color: #e5e5e5;
}

.comment-author-bar .shadow {
	margin: 5px;
}

.comment-author-bar p {
	font-size: 10px;
	text-align: center;
	margin-bottom: 5px;
}

.reply {
	font-size: 12px;
	width: 50px;
	text-align: center;
	margin: 0 auto 10px;
	background-color: #fff;
	border: none;
	padding-top: 2px;
	padding-bottom: 2px;
}

.reply:hover {
	background-color: #999;
	-webkit-box-shadow: inset 0px 1px 2px #555;
	-moz-box-shadow: inset 0px 1px 2px #555;
	box-shadow: inset 0px 1px 2px #555; 
}

.depth-5 .reply {
	display: none;
/* removes reply from last depth in threaded comments.  Change 5 to match the number of threads you allow */
}

a.comment-reply-link {
	width: 50px;
	height: 20px;
	color: #000;
}

.comment-content {
	padding: 10px;
}

ol#commentlist ul.children {
	list-style: none;
	margin-left: 15px;
	margin-right: 0;
}

input#submit {
	font-size: 14px;
	padding: 5px 15px;
	text-align: center;
	margin: 0 auto 10px;
	background-color: #e5e5e5;
	border: none;
	cursor: pointer;
	-webkit-box-shadow: 0px 1px 2px #555;
	-moz-box-shadow: 0px 1px 2px #555;
	box-shadow: 0px 1px 2px #555; 
}

input#submit:hover {
	background-color: #999;
	-webkit-box-shadow: inset 0px 1px 2px #555;
	-moz-box-shadow: inset 0px 1px 2px #555;
	box-shadow: inset 0px 1px 2px #555; 
}

textarea#comment {
	width: 590px;
}

input#author, input#email, input#url, textarea#comment {
	border: none;
	background-color: #fafafa;
	padding: 5px; 
}

input#author:focus, input#email:focus, input#url:focus, textarea#comment:focus {
	-webkit-box-shadow: inset 0px 1px 2px #555;
	-moz-box-shadow: inset 0px 1px 2px #555;
	box-shadow: inset 0px 1px 2px #555;
}

/* @end */

/* @group WordPress Essentials */

.wp-pagenavi {
	font-size: 12px;
	position: relative;
	margin-bottom: 5px;
}

.wp-pagenavi .pages {
	float: right;
}

.wp-pagenavi .page, .wp-pagenavi .current, .wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink {
	margin-right: 5px;
}

.wp-pagenavi .extend, .wp-pagenavi .larger, .wp-pagenavi .first, .wp-pagenavi .last {
	display: none;
}

.gallery {
	margin-right: -15px;
}

.gallery img {
	background-color: transparent;
	-webkit-box-shadow: 0px 1px 2px #555;
	-moz-box-shadow: 0px 1px 2px #555;
	box-shadow: 0px 1px 2px #555;
}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	padding: 5px;
	margin: 0 0 2px 10px;
	display: inline;
}

img.alignleft {
	padding: 5px;
	margin: 0 10px 2px 0;
	display: inline;
}

.alignright {
	float: right;
	margin-left: 15px;
}

.alignleft {
	float: left;
	margin-right: 15px;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	text-align: center;
	background-color: #eee;
	padding: 10px 5px 0 5px;
	margin-bottom: 5px;
	-webkit-box-shadow: 0px 1px 2px #555;
	-moz-box-shadow: 0px 1px 2px #555;
	box-shadow: 0px 1px 2px #555;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px !important;
	line-height: 17px;
	padding: 4px 4px 5px;
	margin: 0;
	background: none;
}

/* @end */

#nav-right {
position: relative;
display: block;
clear: both;
}

#menu-navigation {
        margin: 0;
        padding: 7px 6px 0;
        background: #7d7d7d url(images/gradient.png) repeat-x 0 -110px;
        line-height: 100%;
        width: 100%;
        min-width: 610px;
        margin-top: 80px;
        border-radius: 1em;
        -webkit-border-radius: 1em;
        -moz-border-radius: 1em;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#menu-navigation li {
        margin: 0 5px;
        padding: 0 0 8px;
        float: left;
        position: relative;
        list-style: none;
}
#menu-navigation li li a {
         color: black !important;
}

/* main level link */
#menu-navigation a {
        font-weight: bold;
        color: #e7e5e5;
        text-decoration: none;
        display: block;
        padding:  8px 20px;
        margin: 0;
        -webkit-border-radius: 1.5em;
        -moz-border-radius: 1.5em;
        
        text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#menu-navigation a:hover {
        background: #000;
        color: #fff;
}

/* main level link hover */
#menu-navigation .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 */
#menu-navigation ul li:hover a, #nav li:hover li a {
        background: none;
        border: none;
        color: #666;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
}
#menu-navigation 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 */
#menu-navigation li:hover > ul {
        display: block;
}

/* level 2 list */
#menu-navigation 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);
}
#menu-navigation ul li {
        float: none;
        margin: 0;
        padding: 0;
}

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

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

/* rounded corners of first and last link */
#menu-navigation 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;
}
#menu-navigation 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 */
#menu-navigation:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
}
#menu-navigation {
        display: inline-block;
} 
html[xmlns] #menu-navigation {
        display: block;
}
 
* html #menu-navigation {
        height: 1%;
}

Open in new window



And here is how it will look:
 Sample
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:bobmillington
ID: 35170380
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!
0
 

Author Closing Comment

by:bobmillington
ID: 35170382
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.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35171673
You are welcome, and thanks for the kind words.
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question