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: http://nav.pelli.co.uk/
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">
<head>
<title>Nav Alignment</title>
<link rel="stylesheet" type="text/css" href="screen.css" />
</head>
<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>
<ul>
<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>
</ul>
</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>
</ul>
<a class="login" href="#">Sign Me Up</a>
</div><!--header/wrap-->
</div><!--header-->
<div id="wrap">
<h1>HEADER</h1>
<div id="main_content">
<p>Copy</p>
</div><!--main_content-->
<div id="sidebar">
<p>Sidebar</p>
</div><!--sidebar-->
<br class="clear" />
</div><!--wrap-->
<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);
</script>
</body>
</html>
/* http://meyerweb.com/eric/tools/css/reset/
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-weight:bold;
}
@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");
font-weight:bold;
}
/*--- 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 {
color:#fff;
display:block;
font-weight:bold;
font-size:12px;
font-family:'DIN', Helvetica, Arial, sans-serif;
height:32px;
line-height:37px;
text-align:center;
text-decoration:none;
width:104px;
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 li.blue a { background:#427cff; }
#header .wrap li.green a { background:#22be38; }
#header .wrap li.yellow a { background:#e8dc86; }
#header .wrap li.pink 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 li.blue .current { background:url(current_blue.gif) no-repeat center center; }
#header .wrap li.green .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 li.pink .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.
