Solved

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

Posted on 2011-03-18
6
578 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

760 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

19 Experts available now in Live!

Get 1:1 Help Now