help building drop down menu for primary nav

First backup your existing “style.css” then add this code to the end of the file:

#header ul.menu li ul {
display: none;
background:#eaeaea
}
#header ul.menu li:hover > ul {
display: block;
}
#header ul.menu li ul li {
float: none;
display: block;
}

Note that I didn’t test above code.

Hope it helps.

Thank you Morteza. That is very close. There are a couple of issues.

1) The main content is pushed down when the drop down list expands. I think it should just cover the content and not move it around. Sort of bounces around lol.

2) When a top level menu item is clicked on then the color for the entire list under the page that was clicked changes to orange and the underlines do not disappear when not hovered on.

I’ve added the code and sub-menu pages under Programs and Parents.

Oh, also the primary menu moves around when hovering over a top level menu page.

Seems close to being solved though. Thanks again.

Once again first backup your existing “style.css” and then:

/*
 Find and replace:
*/

#header div.donate {
left: 280px;
position: relative;
top: 34px;
}

#header div.bird {
left: -60px;
position: relative;
top: -55px;
}

#header div.boy {
left: 280px;
position: relative;
top: -120px;
}

#header div.girl {
left: -40px;
position: relative;
top: -240px;
}

#page div.container {
margin:0 auto;
overflow:hidden;
padding:20px 40px;
width:940px;
height: 120px;
}

#header ul.menu li ul {
display: none;
background:#eaeaea;
position: absolute;
z-index: 3;
}

#header ul.menu li ul li {
float: none;
display: block;
padding-right: 20px;
}

and

/*
 Add following:
*/
#header ul.menu li.current-menu-item ul li a {
color: #2E99AD;
border-bottom: 2px solid #FFF;
}
#header ul.menu li.current-menu-item ul li a:hover {
color: #0BB4B0;
border-bottom: 2px solid #0BB4B0;
}

Hope it helps.

Darn I tried it and it really didn’t work. but I also know it could just be a minor fix or two to fix it. I’ll leave it up for a little while if you don’t mind taking a look. I’m also adding the css here.

-------------------------------------------------------------- */

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{
	background:transparent;
	border:0;
	margin:0;
	padding:0;
	vertical-align:baseline;
}
body{
	line-height:1;
}
h1, h2, h3, h4, h5, h6{
	font-weight:normal;
}
ol, ul{
	list-style:none;
}
blockquote{
	quotes:none;
}
blockquote:before, blockquote:after{
	content:'';
	content:none;
}
del{
	text-decoration:line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table{
	border-collapse:collapse;
	border-spacing:0;
}
a img{
	border:none;
}

/* =Global
-------------------------------------------------------------- */
html{}
body{
	background:#A3CD3A;
	color:#525252;
	font-family:Arial, Helvitica, Verdana, sans-serif;
	font-size:15px;
	line-height:25px;
}

a,
a:link,
a:visited{
	color:#2e99ad;
	text-decoration:none;
}

a:active,
a:hover,
a:focus{
	text-decoration:underline;
}

div.clear{clear:both;}

/*#header, #main{background:#fff url(img/col16x10.png) repeat-y center top;}*/

/* =Page
-------------------------------------------------------------- */
#page{min-width:1020px;}
#page div.container {
margin:0 auto;
overflow:hidden;
padding:20px 40px;
width:940px;
height: 120px;
}

/* =Logo
-------------------------------------------------------------- */
#header{background:#fff;}
#header div.container{padding:40px 40px 20px;}
#header div.logo{
	float:left;
	height:110px;
	margin-left:50px;
	position:relative;
	width:220px;
	z-index:2;
}

#header div.donate{
	left:280px;
	position:relative;
	top:34px;
}

#header div.button{display:inline-block;}
#header div.button a{
	background:#F36B25;
	border:2px solid #BF541E;
	border-radius:10px;
	box-shadow:inset 0 0 10px #964218;
	color:#fff;
	display:block;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	line-height:20px;
	padding:5px 8px;
	text-decoration:none;
	text-align:center;
	text-transform:uppercase;
	width:80px;
}
#header div.button a:hover,
#header div.button a:focus{background:#F2844D;}

#header form.searchform{
	background:#2e99ad;
	height:24px;
	margin:0 0 43px;
	float:right;
	overflow:hidden;
	padding:5px 5px;
	width:270px;
	border-radius:5px;
}
#header form.searchform div.input{
	background:#fff;
	float:left;
	overflow:hidden;
	padding:3px 4px;
	width:196px;
	border-radius:5px;
}
#header form.searchform div.input input[type="text"]{
	border:none;
	color:#828282;
	display:inline;
	float:left;
	font-family:Arial, Helvitica, Verdana, sans-serif;
	font-size:14px;
	font-style:italic;
	height:18px;
	margin:0;
	padding:0;
	width:100%;
}
#header form.searchform div.input input[type="text"]:focus{color:#525252;font-style:normal;}
#header form.searchform div.submit{
	background:#1F6875;
	height:24px;
	float:right;
	overflow:hidden;
	width:60px;
	border-radius:5px;
}
#header form.searchform input[type="submit"]{
	background:#1F6875;
	border:none;
	color:#fff;
	cursor:pointer;
	font-family:Arial, Helvitica, Verdana, sans-serif;
	font-size:14px;
	width:100%;
}

#header ul.menu{
	float:right;
	font-size:18px;
	margin-right:-20px;
	overflow:hidden;
	text-transform:uppercase;
	width:680px;
}
#header ul.menu li{float:left;display:inline;margin:0 0 0 20px;}
#header ul.menu a{border-bottom:2px solid #fff;line-height:30px;text-decoration:none;}
#header ul.menu a:hover{color:#0BB4B0;border-bottom:2px solid #0BB4B0;}
#header ul.menu li.current-menu-item a,
#header ul.menu li.current-page-ancestor a{color:#F56A24;border-bottom:2px solid #F56A24;}
/*
 Add following:
*/
#header ul.menu li ul {
display: none;
background:#eaeaea;
position: absolute;
z-index: 3;
}
#header ul.menu li ul li {
float: none;
display: block;
padding-right: 20px;
}
and
/*
 Add following:
*/

#header ul.menu li.current-menu-item ul li a {
color: #2E99AD;
border-bottom: 2px solid #FFF;
}
#header ul.menu li.current-menu-item ul li a:hover {
color: #0BB4B0;
border-bottom: 2px solid #0BB4B0;

#header div.bird {
left: -60px;
position: relative;
top: -55px;
}
#header div.boy {
left: 280px;
position: relative;
top: -120px;
}
#header div.girl {
left: -40px;
position: relative;
top: -240px;
}

/* =Slideshow Parts
-------------------------------------------------------------- */
div.slidewrap{
	float:right;
	height:360px;
	margin:0 0 40px;
	overflow:hidden;
	position:relative;
	width:940px;
	border-radius:10px;
}

#slideshow div.slide{height:360px;position:relative;width:660px;}
#slideshow div.caption{
	background:#000;
	bottom:0;
	color:#fff;
	font-size:16px;
	left:0;
	padding:10px 15px;
	position:absolute;
	opacity:0.8;
	width:630px;
}

#goto{
	background:#1F6875;
	padding:5px;
	position:absolute;
	right:0;
	top:0;
	width:270px;
	z-index:10;
}
#goto div.nav a{
	background:#2E99AD;
	color:#fff;
	display:block;
	font-size:18px;
	height:86px;
	padding:15px;
	text-decoration:none;
}
#goto div.nav  a.one{border-bottom:1px solid #fff;border-top-right-radius:10px;}
#goto div.nav a.two{border-bottom:1px solid #fff;}
#goto div.nav a.three{border-bottom-right-radius:10px;}
#goto div.nav a:hover,
#goto div.nav a:focus,
#goto div.nav a.activeSlide{background:#37B5CC;}
#goto div.nav a span{display:block;font-size:14px;line-height:20px;margin:5px 0 0 0;}

#goto div.more a{color:#fff;font-size:12px;position:absolute;right:15px;}
#goto div.more a.one{top:92px;}
#goto div.more a.two{top:209px;}
#goto div.more a.three{top:325px;}

/* =Main
-------------------------------------------------------------- */
#main{background:#fff;clear:both;margin:0;position:relative;z-index:1;}
#main div.hr hr{display:none;}
#main div.hr{border-bottom:1px solid #bdbdbd;clear:both;margin:0 0 19px;}

#main a[href^="mailto:"],
#main a[href^=" mailto:"]{
	background:url(img/icon-email.png) no-repeat left center;
	padding:1px 0 1px 20px;
}
#main a[href$=".xls"],
#main a[href$=".xlsx"]{
	background:url(img/icon-excel.png) no-repeat left center;
	padding:1px 0 1px 20px;
}
#main a[href$=".rss"]{
	background:url(img/icon-feed.png) no-repeat left center;
	padding:1px 0 1px 20px;
}
#main a[href$=".pdf"]{
	background:url(img/icon-pdf.png) no-repeat left center;
	padding:1px 0 1px 20px;
}
#main a[href$=".vcf"]{
	background:url(img/icon-vcard.png) no-repeat left center;
	padding:1px 0 1px 20px;
}
#main a[href$=".doc"],
#main a[href$=".docx"]{
	background:url(img/icon-word.png) no-repeat left center;
	padding:1px 0 1px 20px;
}

/* =Content
-------------------------------------------------------------- */
body.home #content h1{font-size:28px;line-height:30px;margin:0 0 20px;}
body.home #content p{font-size:17px;line-height:30px;}
#content.full-width{float:none;width:940px;}

#content{
	float:left;
	margin:0 0 20px 0;
	width:640px;
}

#content a{text-decoration:underline;}

#content h1{
	color:#0BB4B0;
	font-size:38px;
	font-weight:normal;
	line-height:40px;
	margin:0 0 30px;
}

#content h2{
	color:#828282;
	font-size:22px;
	margin:0 0 5px;
}

#content h2 a{
	text-decoration:none;
}

#content h2 a:hover,
#content h2 a:focus{
	text-decoration:underline;
}

#content h3{
	color:#828282;
	font-size:18px;
	margin:0;
}

#content h4{
	font-size:16px;
	font-weight:bold;
}

#content p{
	margin:0 0 20px;
}

#content blockquote{
	border-left:5px solid #E8E7D7;
	border-right:5px solid #E8E7D7;
	color:#828282;
	font-size:17px;
	font-style:italic;
	margin:0 30px 30px;
	padding:0 25px;
}

#content pre{
	margin:0 0 20px;
}

#content ul{
	list-style:disc;
	line-height:20px;
	margin:0 0 20px 0;
	overflow: hidden;
	padding:0 0 0 30px;
}

#content ol{
	list-style:decimal;
	margin:0 0 20px 0;
	overflow: hidden;
	padding:0 0 0 30px;
}

#content li{margin:0 0 10px;}

#content ul ul,
#content ol ol,
#content ul ol,
#content ol ul{
	margin:10px 0;
}

#content table{
	border:1px solid #bdbdbd;
	text-align:left;
	margin:0 -1px 24px 0;
	width:100%;
}
#content tr th,
#content thead th{
	padding:9px 24px;
}

#content tr td{
	border-top:1px solid #bdbdbd;
	padding:6px 24px;
	vertical-align:top;
}

#content div.meta{
	font-weight:bold;
	margin:0 0 5px;
}

#content form.paypal{
	border-top:1px solid #bdbdbd;
	border-bottom:1px solid #bdbdbd;
	margin:0 0 20px;
	padding:20px 0;
	text-align:center;
}

#content form.paypal br{display:none;}

#content img{
	margin:0;
	max-width:940px;
	box-shadow:0 0 5px #646464;
}
#content .attachment img{
	max-width:940px;
}

#content .alignleft,
#content img.alignleft{
	display:inline;
	float:left;
	margin-right:24px;
	margin-top:4px;
}

#content .alignright,
#content img.alignright{
	display:inline;
	float:right;
	margin-left:24px;
	margin-top:4px;
}

#content .aligncenter,
#content img.aligncenter{
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

#content img.alignleft,
#content img.alignright,
#content img.aligncenter{
	margin-bottom:20px;
}

#content .wp-caption{
	background:#F1F1F1;
	box-shadow:0 0 5px #646464;
	line-height:18px;
	text-align:center;
	margin-bottom:20px;
	padding:4px;
}

#content .wp-caption img{
	box-shadow:none;
	margin:5px 5px 0;
}

#content .wp-caption p.wp-caption-text{
	margin:5px;
	color:#888;
	font-size:12px;
}

.navigation{
	font-size:14px;
	margin:0 0 20px;
	overflow:hidden;
	padding-top:10px;
}
.nav-previous{float:left;width:50%;}
.nav-next{float:right;width:50%;text-align:right;}
#nav-above{margin:0 0 20px 0;}
.paged #nav-above,
.single #nav-above{display:block;}

form#BB_BuyButtonForm table td:first-child{text-align:right;}
form#BB_BuyButtonForm table td:first-child input#item_price_1{
	width:120px;
}

/* =MailChimp
-------------------------------------------------------------- */
#mc_embed_signup{
	background:#F1F1F1;
	border-radius:10px;
	margin:0 0 10px;
	padding:8px 13px;
}
#mc_embed_signup h4{margin:0 0 10px !important;}
#mc_embed_signup form{overflow:hidden;padding:2px;}
#mc_embed_signup label{float:left;font-size:13px;margin:0;}
#mc_embed_signup input#mce-EMAIL{float:right;margin:0 0 10px;width:140px;}
#mc_embed_signup input[type=submit]{
	background:#F36B25;
	border:2px solid #BF541E;
	border-radius:10px;
	box-shadow:inset 0 0 10px #964218;
	color:#fff;
	cursor:pointer;
	float:right;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	line-height:20px;
	padding:5px 8px;
	text-decoration:none;
	text-align:center;
	width:110px;
}
#mc_embed_signup input[type=submit]:hover,
#mc_embed_signup input[type=submit]:focus{background:#F2844D;}

/* =Sidebar
-------------------------------------------------------------- */
body.page-id-9 #sidebar div.sidenav h4 a,
body.page-id-11 #sidebar div.sidenav h4 a,
body.page-id-13 #sidebar div.sidenav h4 a,
body.page-id-15 #sidebar div.sidenav h4 a,
body.page-id-17 #sidebar div.sidenav h4 a,
body.page-id-19 #sidebar div.sidenav h4 a{background:#37B5CC;}

#sidebar{float:right;padding:0;width:280px;}
#sidebar div.sidenav{
	background:#1F6875;
	margin:0 0 40px;
	padding:5px;
	border-radius:10px;
}

#sidebar div.sidenav h4 a{
	background:#2E99AD;
	color:#fff;
	display:block;
	font-size:20px;
	line-height:30px;
	padding:5px 15px;
	text-decoration:none;

	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#sidebar div.sidenav.categories h4,
#sidebar div.sidenav.archives h4{
	background:#2E99AD;
	color:#fff;
	display:block;
	font-size:20px;
	line-height:30px;
	padding:5px 15px;
	text-decoration:none;

	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#sidebar div.sidenav ul{
	overflow:hidden;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
#sidebar div.sidenav ul li a{
	background:#2E99AD;
	border-top:1px solid #fff;
	color:#fff;
	display:block;
	font-size:16px;
	padding:5px 15px;
	text-decoration:none;
}
#sidebar div.sidenav li a:hover,
#sidebar div.sidenav li a:focus{background:#37B5CC;}
#sidebar div.sidenav ul li.current_page_item > a{background:#37B5CC;}
#sidebar div.sidenav ul li.current-cat > a{background:#37B5CC;}

#sidebar div.cta{margin:0 0 40px;}
#sidebar div.cta h4{
	color:#0BB4B0;
	font-size:15px;
	font-weight:bold;
	margin:0;
}
#sidebar div.cta h5{
	color:#F56A24;
	font-size:16px;
	font-weight:bold;
	margin:0;
}

#sidebar div.cta.connect ul{margin:0 0 15px;overflow:hidden;text-align:right;}
#sidebar div.cta.connect ul li{display:inline;margin:0 10px 0 0;}

#sidebar div.button{display:inline-block;margin:0 0 10px;}
#sidebar div.button a{
	background:#F36B25;
	border:2px solid #BF541E;
	border-radius:10px;
	box-shadow:inset 0 0 10px #964218;
	color:#fff;
	display:block;
	font-size:14px;
	font-weight:bold;
	line-height:20px;
	padding:5px 10px;
	text-decoration:none;
	text-align:center;
}
#sidebar div.button a:hover,
#sidebar div.button a:focus{background:#F2844D;}

#sidebar ul.tabnav{
	background:#1F6875;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	overflow:hidden;
	padding:3px 2px;
}

#sidebar ul.tabnav li{
	display:inline;
	float:left;
	margin:0 2px;
	overflow:hidden;
	text-align:center;
	width:134px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#sidebar ul.tabnav li.on a{background:#37B5CC}
#sidebar ul.tabnav li a{
	background:#2E99AD;
	color:#fff;
	display:block;
	font-size:14px;
	font-weight:bold;
	line-height:30px;
	text-decoration:none;
}

#sidebar div.tab{
	background:#f1f1f1;
	padding:10px;
}

#sidebar div.tab div.news-post{
	background:#fff;
	border-radius:3px;
	line-height:16px;
	margin:0 -5px 5px;
	padding:5px;
}

#sidebar div.tab div.news-post p.title{
	font-size:14px;
	margin:0 0 5px;
}

#sidebar div.tab div.news-post p.date{
	color:#828282;
	font-size:12px;
	margin:0 0 5px;
}
#sidebar div.tab div.news-post div.excerpt{
	font-size:13px;
}

/* =Footer
-------------------------------------------------------------- */
#footer{background:#a3cd3a url(img/bg-footer-tile.gif) repeat-x left top;color:#fff;clear:both;}
#footer div.container{background:url(img/bg-footer.gif) no-repeat left top;padding-top:280px;}
#footer div.address{margin:0 0 10px;text-align:center;}
#footer div.copy{margin:0 0 10px;text-align:center;}
#footer div.credit{margin:0 0 10px;text-align:center;}
#footer div.credit a{color:#fff;text-decoration:underline;}

Did you try to empty browser’s cache after modification?