Solved

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

Posted on 2011-03-18
6
580 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
  • 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 500 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

816 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now