Hey all, I'm building a site with a dropdown nav menu. Check it out here: http://greenpsycho.com/test/ I have a problems with nav that I hope one of you can help me understand: When the dropdown menu opens it only goes to the border of the "header" div and therefore preventing me from seeing the content of my dropdown menu. Any ideas? Thanks html content: <!doctype html> <head> <meta charset="UTF-8"> <title>test!!! - Home</title> <link rel="icon" href="images/favicon.gif" type="image/x-icon"/> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon"/> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <!--start container--> <div id="container"> <!--start header--> <header> <!--start logo--> <a href="#" id="logo">My Company.....</a> <!--end logo--> <!--start menu--> <div id="test"> <ul id="menu"> <li><a href="index.html">Home</a></li> <li><a href="information.html" class="current">Information</a> <div class="dropdown_5columns"> <ul id="SpecialList"> <li><a href="index.html">Latinos</a></li> <li><a href="index.html">Asians</a></li> <li><a href="index.html">Afircan Americans</a></li> <li><a href="index.html">Native Americans</a></li> </ul> </div> </li> <li><a href="resrources.html">Resources</a> <div class="dropdown_4columns"> <p>5 Columns content</p> </div> </li><li><a href="research.html">Research</a></li> <li><a href="about.html">About us</a></li> </ul> </div> <!--end menu--> <!--end header--> </header> <!--end intro--> <!--start holder--> <div class="holder_content"> <section class="group1"> <h3>Testing</h3> <a class="photo_hover2" href="#"><img src="images/1-2.jpg" width="150" height="99" alt="picture1"/></a> <p>sldfksdflsfks///////////////////////////////////////////////sdfkdsjfskjdf<br><br><br><br><br><br><br> </p> <h3>Rates</h3> <p>ksdjfksjfsdjfsdfsfsldfs. ,,ksdfjskdf skfjsdkfjs skfsdfkjdsfkdsf sdkfjsd<br><br><br><br>.</p> </section> <aside class="group2"> <h3>Resources</h3> <article class="holder_news"> <h4>lsdkf skfjskf sfkjsd</h4> <a class="photo_hover2" href="#"><img src="images/2.jpg" width="150" height="99" alt="picture1"/></a> <p>kjfksdfjsdf skdfjdskfjsdkf sofadjialsfjasd askdjasdkjasdkma akdjaskdjas kasjdkasdjaskdj kasdjaduq93uasnd askjdjaskdhjuahd81a askdjaskdjasdkjaskdjass..... </p> <span class="readmore"><a href="#">Read more..</a></span> </article> <article class="holder_news"> <h2>laskdklas askd</h2> <a class="photo_hover2" href="#"><img src="images/3.jpg" width="150" height="99" alt="picture1"/></a> <p>Skaskdjas askda daskdjaskdjaskd aksdjkasdjakd aksdjaskdjaskjdaskdjasd kadjkasdkasd kasjdkasdjaskd akdjaskdja akdjaskda kasjaskdjaskdjasdkadkasjd. </p> <span class="readmore"><a href="#">Read more..</a></span> </article> </div> <!--end holder--> </div> <!--end container--> <!--start footer--> <footer> <div class="container"> <div id="FooterTree"> Web design by: <a href="mailto:bugy@greenpsycho.com" style="color:#FFF">Bugy</a> </div> </div> </footer> <!--end footer--> <!-- Free template distributed by http://freehtml5templates.com --> </body></html> HTML: CSS Code: html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } s ol, ul { list-style: none; } a img {border:none} aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block} /************************************************** Global styles ***************************************************/ html, body { width:100%; height:100%; } html, body{ font-family:Georgia, "Times New Roman", Times, serif; font-size: 13px; color: black; margin:0 0 1px; line-height: 1.5; background-image:url(../images/bg1.png); background-position:left top; background-repeat:repeat; } p { margin-bottom:7px; } a, p a { text-decoration:none; } a:hover { text-decoration:underline; } h1, h2, h3, h4, h5, h6 { font-family:Georgia, "Times New Roman", Times, serif; font-weight: normal; position:relative; } h1{ font-size: 35px; line-height:1.6; color:black; text-transform:capitalize; text-align:left; margin-left:40px; border-bottom:1px dotted black; } h1 span{ line-height:1.7px; color:black; font-size:14px; text-transform:none; display:block; } h2{ font-size: 18px; line-height:1.7; color:black; text-align:left; width:380px; padding-top:8px; margin-left:40px; } h3{ font-size: 28px; line-height:1.6; color:black; text-transform:none; text-align:left; background-color:transparent; padding-top:12px; margin-bottom:9px; border-bottom:1px dotted black; } h3 span{ font-size: 12px; color: black; text-transform:capitalize; height:24px; margin-top:15px; text-align:left; display:block; } h4{ font-size: 18px; line-height:1.7; color:black; text-align:left; width:350px; padding-top:8px; margin-bottom:12px; } h4 span{ font-weight:bold; font-size:15px; font-family:Georgia, "Times New Roman", Times, serif; background-color:#FFCC33; padding:8px; margin-left:20px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; } /*************************************************** Main containers ***************************************************/ #container, #container_left, #container_right{ position: relative; width:100%; } #container{ position:relative; width:980px; margin:0 auto; text-align:left; background-color:white; padding:15px; overflow: hidden; -moz-box-shadow: 0 0 5px 5px #D8D8D8; -webkit-box-shadow: 0 0 5px 5px #D8D8D8; box-shadow: 0 0 5px 5px #D8D8D8; } .group1 { float: left; width: 613px; position: relative; background:white; padding:15px; margin-bottom:10px; } .group2 { float: right; width: 277px; position: relative; background:white; padding:15px; margin-bottom:10px; margin-left:30px; } .group3 { float: left; width: 613px; position: relative; background:white; padding:15px; margin-top:-28px; } .group_bannner_left { width: 380px; position: absolute; top:146px; left:50px; background:transparent; margin-top:50px; } header{ position: relative; float:left; width: 100%; height:100px; } /************************************************** INTRO ***************************************************/ #intro{ width: 960px; position: relative; float: left; height:318px; padding:10px; background:#EAEAEA; margin-top:17px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; } /*************************************************** HOLDERS ***************************************************/ .holder_content { position: relative; float: left; width: 100%; margin-bottom:8px; background:white; } .holder_content_separator{ margin-bottom:20px; } /*************************************************** GALLERY ***************************************************/ a.photo_hover3{ position:relative; float: right; margin:5px 13px 8px 0; padding: 8px; } a.photo_hover3{ background-color:white; border: 1px solid #E1E1E1; } a.photo_hover3:hover { border: 1px dotted #66CCFF; background-color:#C7EDFF; opacity:0.9; z-index:1000; } a.photo_hover2{ position:relative; float: left; margin:5px 13px 8px 0; padding: 8px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; } a.photo_hover2{ background-color:white; border: 1px solid #E1E1E1; } a.photo_hover2:hover { border: 1px solid #E1E1E1; } /*************************************************** GALLERY ***************************************************/ .holder_gallery { width:610px; float:left; margin-right:10px; padding:0; } .holder_gallery a.photo_hover {left:42px} .holder_gallery h3 { clear:left} .holder_gallery a.name{ font-size:12px; text-align:left; position:relative; margin-top:15px; display:block; clear:left; line-height:15px; } .holder_gallery a.name1{ font-size:12px; position:relative; display:inline; text-align:left; top:20px; left:0; } .holder_gallery a.description{ font-size:12px; float:left; position:relative; margin-right:5px; padding-top:7px; color:gray; width:300px; display:inline; } /************************************************** FOOTER ***************************************************/ footer{ position:relative; height:90px; clear:both; width:100%; margin-bottom:18px; background-color: #112A5D; } #FooterOne, #FooterTwo, #FooterTree { position: absolute; } #FooterTwo{ position: absolute; right: 225px; top:26px; color:white; } #FooterTree{ position: absolute; left: 225px; top:26px; color:white; } .container{ width:980px; margin:0 auto; background-color:#33CC99; } /*************************************************** MENU ***************************************************/ /* Navigation Bar */ #test { position:absolute; top:25px; right:0; width:580px; } #test ul li{ float: left; margin-left:16px; line-height:normal; } #menu { list-style:none; position:relative; height:58px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); background: #112A5D; } #menu li { float:left; text-align:center; position:relative; border:none; } #menu ul li a:hover{ color: white; text-decoration:underline; } #menu li a.current{ background-color:#6787C7; } #menu li a { font-size: 20px; font-family:Georgia, "Times New Roman", Times, serif; color: white; text-transform:capitalize; font-weight:normal; display:block; /* IE6, IE7 line height fix */ padding-bottom:8px; padding-top:15px; background-color:transparent; margin-top:0px; margin-right:6px; text-decoration:none; } #menu li:hover a { color: white; text-decoration:underline; } #menu li .drop { padding-right:21px; background:url("img/drop.png") no-repeat right 8px; } #menu li:hover .drop { background:url("img/drop.png") no-repeat right 7px; } /* Drop Down */ .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; float:left; position:absolute; left:-999em; /* Hides the drop down */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none; /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* Rounded Corners */ -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } .dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .dropdown_3columns {width: 420px;} .dropdown_4columns {width: 220px;} .dropdown_5columns {width: 220px;} #menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns { left:-1px; top:auto; } #SpecialList { list-style:none; } /*************************************************** SPECIFIC ***************************************************/ #logo{ position:relative; float:left; top:20px; left:30px; width:360px; height:160px; font-size: 40px; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; color: #112A5D; } .clearing{ clear: both; display: inline; width: 100%; height: 0; overflow:hidden; } .readmore{ font-weight:bold; font-size:15px; font-family:Georgia, "Times New Roman", Times, serif; color:#333333; } .readmore a { color:#333333; } .holder_news { width:274px; float:left; border-bottom:1px dotted black; margin-bottom:10px; padding-bottom:12px; } .button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 8px 41px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 16px/100% Georgia, "Times New Roman", Times, serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .button:hover { text-decoration: none; } .button:active { position: relative; top: 1px; } .black { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); } .black:hover { background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); background: -moz-linear-gradient(top, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); } .black a { color: #ffffff; } Code (markup):
The fix to your problem is quite simple to be frank You are using the drop down menu, but you haven't made sure for it to render on top of everything when somebody hovers over the navigation. By simply adding a z-index to your drop down content divs, everything is solved: .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; float:left; position:absolute; left:-999em; /* Hides the drop down */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #777777; border-top:none; z-index: 1001; /* Makes sure that the drop down is on top of everything */ /* Gradient background */ background:#F4F4F4; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* Rounded Corners */ -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } Code (markup):
Alejandro is right that your core problem you are asking about is z-index related, someone needs to tell you (I guess I'm it) that even for the fat bloated steaming pile known as HTML 5, your code is a NIGHTMARE. What in blazes makes those H3? (it is improper to use a H3 without a H2 and H1 preceeding them!)... what makes that sidebar related as a literary aside to the content? Of course, if you're using aside just because it's placed off to one side, so much for the alleged semantics of that tag... (Literally how people are using ASIDE means it's about as semantic as CENTER or FONT -- hello 1997) Are the pointlessly redundant comments actually helping you? what's with that broken/pointless formatting (or lack therein) of the code making it impossible to diagnose? <!--start header--> <header> No, really? Opening a header tag is the start of the header?!? I don't think anyone could figure that out without the comment... :/ Static style inlined in the markup, pointless/confusing/nonsensical use of numbered headings, HTML 5 bloat -- you've got this joyous mix of 1997 style code with a not ready for prime-time and pointless modern doctype... even the favicon LINK is gibberish with the mime-type not matching, and the use of an invalid (unless you ask Mozilla) file format. All of that combined... well... in the words of your namesake "...and that is why you fail." First thing I'd suggest is dialing that back to an actual RECOMMENDATION doctype, and therein swinging a giant dwarven axe all the HTML 5 idiocy. Something like: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="images/favicon.ico" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Home - test!!! </title> </head><body> <!-- empty spans are image replacement sandbags, do not remove horizontal rules are for semantics and non screen.css users --> <div id="heightWrapper"><div id="top"> <h1> <a href="#"> My Company <span></span> </a> </h1> <ul id="mainMenu"> <li> <a href="index.html">Home</a> </li><li> <a href="information.html" class="current">Information</a> <ul> <li><a href="index.html">Latinos</a></li> <li><a href="index.html">Asians</a></li> <li><a href="index.html">African Americans</a></li> <li><a href="index.html">Native Americans</a></li> </ul> </li><li> <a href="resrources.html">Resources</a> <div>5 Columns content</div> </li><li> <a href="research.html">Research</a> </li><li> <a href="about.html">About us</a> </li> <!-- #mainMenu --></ul> <hr /> <div id="contentWrapper"><div id="content"> <!-- double wrapping DIV are for easier fluid/semi-fluid content column and makign responsive layout simpler too. --> <h2>Testing</h2> <a href="#"> <img src="images/1-2.jpg" width="150" height="99" alt="picture1" class="leadingPlate" /> </a> <p> sldfksdflsfks///////////////////////////////////////////////sdfkdsjfskjdf </p> <h2>Rates</h2> <p> ksdjfksjfsdjfsdfsfsldfs. ,,ksdfjskdf skfjsdkfjs skfsdfkjdsfkdsf sdkfjsd. </p> <!-- #content, #contentWrapper --></div></div> <div id="sideBar"> <h2>Resources</h2> <div class="subSection"> <h3>lsdkf skfjskf sfkjsd</h3> <a href="#"> <img src="images/2.jpg" width="150" height="99" alt="picture1" class="leadingPlate" /> </a> <p> kjfksdfjsdf skdfjdskfjsdkf sofadjialsfjasd askdjasdkjasdkma akdjaskdjas kasjdkasdjaskdj kasdjaduq93uasnd askjdjaskdhjuahd81a askdjaskdjasdkjaskdjass..... </p> <a href="#" class="readMore">Read more...</a> <!-- .subSection --></div> <div class="subSection"> <h3>laskdklas askd</h3> <a href="#"> <img src="images/3.jpg" width="150" height="99" alt="picture1" class="leadingPlate" /> </a> <p> Skaskdjas askda daskdjaskdjaskd aksdjkasdjakd aksdjaskdjaskjdaskdjasd kadjkasdkasd kasjdkasdjaskd akdjaskdja akdjaskda kasjaskdjaskdjasdkadkasjd. </p> <a href="#" class="readMore">Read more...</a> <!-- .subSection --></div> <!-- #sideBar --></div> <!-- #top, #heightWrapper --></div></div> <hr /> <div id="footerWrapper"><div id="footer"> Web design by: <a href="mailto:bugy@greenpsycho.com">Bugy</a> <!-- #footer, #footerWrapper --></div></div> </body></html> Code (markup): I have the time later today (full plate after a long night, no promises) I'll toss together the CSS I'd be using with that. I swear, HTML 5 is just leading so many people now down the road to failure, and for what? To let a few authors sell more books, put a few asses in seats at lectures, and let the web predators prey on the ignorant with a new sick buzzword?
Wow Deathshadow.... I love getting my head bitten off every once in a while.... Really appreciate your comment and markup. Anyone else feel the same about html5? when if came out it seems more clean than previous version, but i guess you need to stick to either the older format or the new one and not to combine the two? btw, I have no formal training in web development as you might have gathered so far - I develop for my research - I'm a psychologist and have no budget unfortunately to pay for a real solid developer. Anyway, thanks and will gladly see your advice about the CSS part.
Here's what I came up with: http://www.cutcodedown.com/for_others/yoda699/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/yoda699/ is open for easy access to the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS3 if not for a few browser-specific values. Currently has no IE6/earlier support for the menu, but that could be added easily enough with something like PeterNed's "hover anywhere" if you still care. (increasingly nobody does). I opened it up semi-fluid, since fixed width is accessibility rubbish. Ideally some media queries should be added to support screen resolutions below that 880px minimum the menu imposes on it. I also switched the flow text to sans-serif because serif fonts are often hard to read on screens at 'normal' sizes, because of the low resolution. Serif == good for print, sans == good for screen. The larger fixed size text of the headers and menu I left because at 18px and larger it's unlikely you'd get any complaints. I also made it 100% min-height since I assume that's why you had the full-width footer. It also has proper semantics, proper heading orders, and graceful degradation for when CSS is unavaliable/not present. All the hooks needed to make it into a 'responsive layout' are also in there, that part just needs to be added to the code. Since your menu was broken I wasn't 100% sure on the appearance, so I took a wild guess... probably not what you had in mind, but things like corners, padding and backgrounds are easy enough to adjust. I use a much smaller reset than you did... the larger resets in my experience are just a waste of code; same goes for all the extra BS just to make HTML 5 work in IE8/lower. IE6/lower gets a fixed width instead of the fluid since it doesn't know what min/max-width is, Oh well. As the older browsers fall by the wayside it helps to focus on making sure the page is usable, and not really worry about making them identical or have all the bells and whistles. Have a good look at the code, I'm sure you'll have some questions. I tried to document some of the more unusual bits for you, but there's always a few odds and ends.