Navigation, centralised with dropdown expanding 100%

Hi all,

I am trying to build a navigation bar that is inside a header div on a page, the page is fixed width and centered, as is the nav. On hover (over the Options nav link, I need the dropdown to then appear (horizontally). The problem I am having is, I need the dropdown background to be the same colour as the parent link background (in this example yellow) and for the ul ul to stretch the full width of the page.

So in the example, the header would be the black bar (full width) and on hover of options, for the yellow bar to also stretch 100% of the page below it:

The page I have so far is as follows:

I have built the nav but only so that the dropdown shows all of the time, but I need this to show just on hover.
Also, the dropdown is only stretching to the container width.

Is there a way to make only the dropdown bar (the long yellow UL bar) stretch the entire width and only on hover?

The code is as below:

<!DOCTYPE html>
<html dir="ltr" lang="en">
	<title>Nav Alignment</title>
	<link rel="stylesheet" type="text/css" href="screen.css" />

<body class="informative">
<div id="header">
	<div class="wrap">
		<a class="logo" href="/">Barmade</a>
		<div class="logo_b"></div>
		<ul id="nav">	
			<li class="blue"><a href="#">HOME</a></li>
			<li class="green"><a href="#">ABOUT</a></li>
			<li class="yellow"><a href="#">OPTIONS</a>
					<li><a href="#">Option A</a><span class="current"></span></li>
					<li><a href="#">Option B</a></li>
					<li><a href="#">Option C</a></li>
					<li><a href="#">Option D</a></li>
					<li><a href="#">Option E</a></li>
			<li class="pink"><a href="#">FIND US</a></li>
			<li class="purple"><a href="#">REGISTER</a></li>
			<li class="turquoise"><a href="#">CONTACT US</a></li>
		<a class="login" href="#">Sign Me Up</a>
<div id="wrap">
	<div id="main_content">
	<div id="sidebar">
	<br class="clear" />	
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\\\b"), "");
if (window.attachEvent) window.attachEvent("onload", sfHover);

   v2.0 | 20110126
   License: none (public domain)
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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
body {
	line-height: 1;
ol, ul {
	list-style: none;
blockquote, q {
	quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
table {
	border-collapse: collapse;
	border-spacing: 0;
.clear { clear:both; }

/*--- TYPOGRAPHY ---*/
@font-face {
    font-family: DIN;
    src: url("../_fonts/DINWeb-Light.eot");
@font-face {
    font-family: DIN;
    src: url("../_fonts/DINWeb-Bold.eot");
@font-face {
    font-family: DIN;
    src: url("../_fonts/DINWeb-Light.woff") format("woff");
@font-face {
    font-family: DIN;
    src: url("../_fonts/DINWeb-Bold.woff") format("woff");

/*--- BLOCK ---*/
body { color:#555; font:normal 12px/16px Helvetica, Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 { color:#555; font-weight:bold; }
h1 { font:normal 30px/30px 'DIN', Helvetica, Arial, sans-serif; margin:25px 0 30px 0; }
h2 { color:#f6a0ab; font:bold 17px/17px 'DIN', Helvetica, Arial, sans-serif; margin-bottom:15px; }
h3 { margin:0; }
h4 { font-weight:normal; }
h5 { margin-bottom:10px; }

.recruiters h2 { color:#ACA0B5; }

p, ul, ol, dl, dt, dd { color:#555; font:normal 12px/16px Helvetica, Arial, sans-serif;  }
p, ul, ol, blockquote { margin-bottom:20px; }

dl { margin-bottom:20px; }
dt { float:left; margin-right:10px; width:90px; }
dt.wide { width:140px; }

hr.dotted { border-color:#ccc; border-style:dotted; border-width:1px 0 0 0; clear:both; margin:25px 0; }

.clearfix { display:block; clear:both; }

/*--- INLINE ---*/
a { color:#555555; }
strong { font-weight:bold; }

h1 span { font-weight:bold; }

/*--- GLOBAL ---*/
#wrap a { text-decoration:none; border-bottom:1px solid #555; }
.arrow_link, .arrow_link_white, .arrow_link_yellow, .arrow_link_pink, .arrow_link_purple, .button_grey { border:none !important; }

.arrow_link { background:url(../_images/elements/view_link_arrow.gif) no-repeat left center;  clear:left; padding-left:12px; text-decoration:underline; }
.arrow_link_white { background:url(../_images/elements/view_link_white_arrow.gif) no-repeat 5px center; color:#fff; clear:left; padding-left:17px; }
.arrow_link_yellow { background:url(../_images/elements/view_link_yellow_arrow.gif) no-repeat 7px center #e8dc86; clear:left; color:#555; display:inline-block; margin-top:20px; padding:5px 10px 5px 20px; text-align:left; text-decoration:none; border-radius:5px; width:135px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.arrow_link_pink { background:url(../_images/elements/search_arrow.gif) no-repeat 7px center #f6a0ab; clear:left; color:#fff; display:inline-block; margin-top:20px; padding:5px 10px 5px 20px; text-align:left; text-decoration:none; border-radius:5px; width:135px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.arrow_link_purple { background:url(../_images/elements/white_arrow_purple.gif) no-repeat 7px center #aca0b5; clear:left; color:#fff; display:inline-block; margin-top:20px; padding:5px 10px 5px 20px; text-align:left; text-decoration:none; border-radius:5px; width:135px; -moz-border-radius:5px; -webkit-border-radius:5px; }

.arrow_link_pink:hover, .arrow_link_yellow:hover, .arrow_link_purple:hover, .button_grey:hover { color:#555; border:none  }

/*--- FORMS ---*/
button, input, label { font:normal 12px/16px Helvetica, Arial, sans-serif; }
label { color:#555555; }
input[type='text'] { width:305px; }

button, .button { background:url(../_images/elements/search_arrow.gif) no-repeat 5px center #f6a0ab; border:none; color:#fff; padding:5px 10px 5px 20px; text-decoration:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.button_grey { background:url(../_images/elements/white_arrow_555.gif) no-repeat 5px center #555; border:none; color:#fff; padding:7px 10px 7px 20px; text-decoration:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }

.button_grey, .arrow_link_purple { display:inline-block; height:30px; line-height:30px; padding:0 10px 0 20px !important; }

fieldset { border-top:1px dotted #ccc; margin-top:30px; padding-top:30px;  }
fieldset ol { margin:0; }

.details label { clear:left; float:left; margin-right:10px; width:140px; }
.details input, .details select, .details textarea { float:left; margin-bottom:10px; }

.radio { margin-bottom:10px; }
.radio input { clear:none; margin:0; }
select#year_of_birth, select#month_of_birth, select#date_of_birth { margin-right:10px; width:auto; }
.radio input { float:none; margin-right:5px; }
/*.radio label { display:inline; float:none; width:auto; }*/

input.ccSecCode { width:175px; }

li.indent { padding-left:150px; }
input.indent { float:none; }
label.indent { float:none; }

select { width:145px; }
select.full { width:310px; }
select.ccExp { margin-right:10px; width:85px; }

textarea { height:70px; width:305px; }
textarea.extended { height:140px; }

form h3 { clear:left; margin-bottom:15px; }
form h4 { clear: left; margin:15px 0; }

/*for require status*/
fieldset span { display:inline-block; margin-left:5px; }

#search label { color:#fff; }
#search fieldset { border:none; margin:0; padding:0; }

#subscribe input, #subscribe label, #search input, #search label { float:none; }

.refine label { clear:none; float:none; margin-left:10px; width:auto; }
.refine select { float:none; width:auto; }

/*new styles with ol form*/
.courses label, .courses input { /*clear:none; float:left;*/  }
.courses label { /*width:auto;*/ }
input[type='checkbox'] { /*margin:0 5px 0 0;*/  }
.courses ol { overflow:hidden; width:592px; }
.courses li { float:left; margin-bottom:20px; width:145px; }

/*--- STRUCTURE ---*/
#header .wrap { height:159px; margin:0 auto; padding:0 16px; width:944px; }
#wrap { margin:0 auto; padding:25px 16px; width:944px; }

.informative #main_content { float:left; margin-bottom:10px; padding-right:30px; width:594px; }
.informative #main_content h1 { margin-bottom:20px; }
.informative #main_content h2 { color:#555555; }
.informative #sidebar { float:right; margin-left:16px; width:304px; }

/*--- HEADER ---*/
#header { background:#000; }

/* navigation */
#header .wrap #nav { clear:both; float:left; position:relative; top:37px; width:944px; }
#header .wrap #nav li { float:left; margin-right:2px; }
#header .wrap #nav li a { 
	font-family:'DIN', Helvetica, Arial, sans-serif;
	border-top-left-radius:5px; border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; 
#header .wrap #nav li a:hover { color:#555; }
#header .wrap #nav li li a { background:url(../_images/elements/dropdown_divider.gif) no-repeat left center; color:#666; display:inline-block; font:normal 12px/24px Helvetica, Arial, sans-serif; height:24px; line-height:24px; margin-right:0px; padding:0 10px; width:auto; }
.header_recruiters li li a { background:url(../_images/elements/dropdown_divider_white.gif) no-repeat left center !important; color:#fff !important; }
#header .wrap #nav ul li:first-child a { background:none !important; padding-left:0 !important; }
#header .wrap #nav li li a:hover { color:#fff; }

#header .wrap a { background:#427cff; }
#header .wrap a { background:#22be38; }
#header .wrap li.yellow a { background:#e8dc86; }
#header .wrap a { background:#e474ee; }
#header .wrap li.purple a { background:#a874ee; }
#header .wrap li.turquoise a { background:#84dbe5; }

#header .wrap li span { display:block; height:8px; width:104px; }
#header .wrap li li span { display:block; height:8px; width:auto; position:relative; top:8px; }
#header .wrap .current { background:url(current_blue.gif) no-repeat center center; }
#header .wrap .current { background:url(current_green.gif) no-repeat center center; }
#header .wrap li.yellow .current { background:url(current_yellow.gif) no-repeat center center; }
#header .wrap .current { background:url(current_pink.gif) no-repeat center center; }
#header .wrap li.purple .current { background:url(current_purple.gif) no-repeat center center; }
#header .wrap li.turquoise .current { background:url(current_turquoise.gif) no-repeat center center; }

#header .wrap #nav li ul { background:#e8dc86; display:inline; margin:0; padding:0; position:absolute; left:0; top:32px; width:100%; }

#header .wrap .logo { background:url(logo_textual.gif); float:left; height:22px; margin-top:45px; text-indent:-9999px; width:181px; }
#header .wrap .logo_b { background:url('logo.gif'); float:right; height:68px; margin-top:22px; width:55px; }
.login { color:#999; display:inline-block; float:right; margin-top:50px; position:relative; top:-64px; }
.welcome { color:#999; display:inline-block; float:right; margin-top:50px; position:relative; top:-64px; right:100px; }

Thanks so much in advance.

Try changing your styles to something like this (tarting line 244):

#header .wrap #nav li ul {
     background: none repeat scroll 0% 0% #E8DC86;
     display: inline;
    [COLOR="#FF0000"] left: -9999px;[/COLOR]
     margin: 0pt;
     padding: 0pt;
     position: absolute;
     top: 32px;
     width: 100%;

[COLOR="#FF0000"]#header .wrap #nav li:hover ul {
     left: 0pt;

That’s fantastic, much better, but is there any way to make the hover ul that comes in with the yellow bg stretch the entire width of the page (or is that totally impossible because it is in a centered container?) Are there any work arounds?

Thanks so much for your help ralph

I can’t see an easy way to make it full width. You could do something like change the width from 100% to, say, 3000px, but this would only make it stretch off to the right, because it is set to left: 0 on hover. The other problem is that there will be a scroll bar on hover. There may be some trick way to do it, but I’m not sure it’s worth it. It might be a job for JavaScript.

Ouch! I thought that might be the case, and JavaScript isn’t my strong point, well, even weaker than my CSS :S

Thanks again for your help, really do appreciate it.

Haha :slight_smile:

Is there a way to move this to the JavaScript forum, or should I make a new post?

Some genius will probably come up with a clever solution, so don’t give up hope. But this is where I get off the bus. :smiley:

It’s easy to move, but it might be worth waiting to see if the CSS gurus have another suggestion. Up to you, though.

Don’t think this can be done via css… could somebody possibly move this over to the JavaScript forum for me? Or should I re post there?

Thank you