Two level top menu bar
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="robots" content="index, follow" /> <style type="text/css"> * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8125em; /* 16x0.8125=13px */ line-height: 1.1875em;/* 16x1.2=19px */ margin:0; /* 18x1=18px */ background:#8FAEBF; } h1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1.375em; /* 16x1.375=22px */ line-height: 1.636em;/* 16x1.636=36px */ margin: 0; } h2,h3 { font-size: 1.125em; /* 16x1.125=18px */ margin:0; /* 18x1=18px */ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #31444F; } a, ul a, a:active, a:visited { color: #375A6E; text-decoration:none; } a:hover { color: #50798F; text-decoration:underline; } #wrapper { margin: 0 auto; width: 990px; background:#fff; } #header { color: #333; width: 970px; float: left; padding: 10px; height: 70px; margin: 0px; background: #31444F; } #header h1 a, #header h2 a { color:#fff; text-decoration:none; } #header h1 a:hover, #header h2 a:hover { text-decoration:underline; } #navigation { float: left; width: 990px; color: #333; padding: 5px 0 5px 0; margin: 0; background: #375A6E; border-top:0px solid #8FAEBF; border-bottom:0px solid #8FAEBF; } #navigation li { display:inline; border:0px solid #FFF; color:#FFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } #navigation a { margin:0; color:#FFF; text-decoration:none; padding: 4px 15px 4px 15px; } #navigation a:hover { margin:0; background: #476C7F; padding: 4px 15px 4px 15px; text-decoration:underline; } #subnavigation { float: left; width: 990px; color: #333; padding: 5px 0 5px 0; margin: 0; background: #50798F; border-bottom:0px solid #8FAEBF; } .subnavigation_left { float:left; } .subnavigation_left li { display:inline; } #subnavigation a { margin:0; padding:0; color:#FFF; text-decoration:none; padding: 4px 15px 4px 15px; } #subnavigation a:hover { margin:0; padding:0; padding: 4px 15px 4px 15px; text-decoration:underline; } .subnavigation_right { width:150px; float:right; } .date { float:right; margin:0; padding: 0 15px; color:#FFF; } #one { color: #31444F; padding: 10px 0 0 10px; width: 276px; float: left; background: #FFF; } #one_wide { color: #333; padding: 10px 0 0 10px; width: 636px; float: left; background: #FFF; } #one .item { padding: 10px; margin: 0 0 10px 0; background: #EFFAFF; border:1px solid #E0EAEF; } #two { float: left; color: #31444F; padding: 10px 0 0 10px; width: 350px; display: inline; } #two .item, #one_wide .item { padding: 10px; margin: 0 0 10px 0; background: #FFF7EF; border:1px solid #FFDFBF; } #three { color: #31444F; padding: 10px 10px 0 10px; width: 324px; float: left; } #three .item, #three_one .item, #three_two .item { padding: 10px; background: #EFFAFF; border:1px solid #E0EAEF; margin: 0 0 10px 0; } #three_one { color: #333; background: #FFF; margin: 0px 0 0px 0px; padding: 0px 0 10px 0; width: 157px; float: left; } #three_two { color: #333; background: #FFF; margin: 0px 0px 0px 0px; padding: 0px 0 10px 10px; width: 157px; float: left; } #one h2, #three h3, #three_one h3, #three_two h3 { display:block; border-bottom:1px solid #E0EAEF; margin: 0 0 5px 0; padding:0; } #one_wide h2, #two h2 { display:block; border-bottom:1px solid #FFDFBF; margin: 0 0 5px 0; padding:0; } p, #one ul, #one_wide ul, #two ul, #three ul, #three_one ul, #three_two ul { margin:0; padding: 0 0 10px 0; color: #31444F; } #one li, #one_wide li, #two li, #three li, #three_one li, #three_two li { margin:0 0 0 20px; padding:0; color: #31444F; } #two ol, #one_wide ol { margin: 0 0 10px 5px; color: #31444F; } #two blockquote { margin: 10px; padding: 10px; border-left:5px solid #fff; background:#fff; } #one .item img, #two .item img { float:left; margin: 3px 10px 5px 0; padding:3px; background:#FFF; } #one .item img { border:1px solid #E0EAEF; } #two .item img { border:1px solid #FFDFBF; } #footer { clear: both; background: #375A6E; width: 990px; color: #333; padding: 5px 0 5px 0; margin: 0; } #footer a { margin:0; color:#FFF; text-decoration:none; padding: 5px 15px 5px 15px; } #footer li { display:inline; border:0px solid #FFF; color:#FFF; } .item-footer { padding:0 0 0 0; margin: 10px 0 0 0; font-size:0.75em; } #one_wide .item p a , p a, #one_wide .item .item-footer a { text-decoration:underline; } label { display:block; font-weight:bold; margin: 5px 0 0 5px; } input { margin: 0 0 0 5px; padding:3px; border: 1px solid #FFDFBF; font: normal 0.8em Arial, sans-serif; color:#333; } textarea { margin: 5px 0 0 5px; padding:3px; border: 1px solid #FFDFBF; font: normal 0.8em Arial, sans-serif; color:#333; width:320px; height:100px; display:block; } input.button { margin: 0 0 0 5px; height: 22px; padding: 2px 3px; background: #FFDFBF; border: 1px solid #FFDFBF; font: normal 0.8em Arial, sans-serif; color:#333; } img { margin:0; padding:0; border:1px solid #E0EAEF; } </style> <title>3x60minutes - 2 columns</title> </head> <body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Header --> <div id="header"> <h1><a href="#" title="">3x60minutes</a></h1> <h2><a href="#" title="">your website subtitle</a></h2> </div> <!-- End Header --> <!-- Begin Navigation --> <div id="navigation"> <ul> <li><a href="index.html">Home</a></li> <li><a href="2column.html">2 column</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- End Navigation --> <!-- Begin SubNavigation --> <div id="subnavigation"> <div class="subnavigation_left"> <ul> <li><a href="#">your sub navigation</a></li> <li><a href="#">or whatever you need</a></li> </ul> </div> <div class="subnavigation_right"> <span class="date"> Nov 23, 2007 </span> </div> </div> <!-- End SubNavigation --> <!-- Begin Column One--> <div id="one_wide"> <div class="item"> <h2>headline</h2> <p>Rterritus. Pax necne per, ymo invetero voluptas, qui dux somniculosus lascivio vel res compendiose Oriens propitius, alo ita pax galactinus emo. </p> <p><a href="#" title="">this is a <b>bold</b> and <i>italic</i> link example</a></p> <ul> <li>unordered list</li> <li>list point</li> </ul> <ol> <li>ordered list</li> <li>list point</li> </ol> <span class="item-footer"> <a href="#" title="">Read more</a> | <a href="#" title="">Comments (23)</a> <span class="date">Nov 23, 2007</span> </span> </div> <div class="item"> <h2>Example Form</h2> <form method="get" action="#"> <p> <label>Name</label><input name="name" value="Your Name" type="text" size="25" /> <label>E-Mail</label><input name="email" value="Your Email" type="text" size="25" /> <label>Your Comment</label><textarea rows="5" cols="5"></textarea><br /> <input class="button" type="submit" value="» submit" /> </p> </form> </div> </div> <!-- End Column One--> <!-- Begin Column Three --> <div id="three"> <div class="item"> <h3>your ad</h3> <p>this area is perfect for an content ad (300x250)</p> <p><img src="img/image.jpg" width="300" height="250" alt="" /></p> </div> <div id="three_one"> <div class="item"> <h3>Categories</h3> <ul> <li><a href="#" title="">Home</a></li> <li><a href="#" title="">Category 1</a></li> <li><a href="#" title="">Category 2</a></li> <li><a href="#" title="">Category 3</a></li> </ul> </div> <div class="item"> <h3>Articles</h3> <ul> <li><a href="#" title="">Article 1</a></li> <li><a href="#" title="">Article 2</a></li> <li><a href="#" title="">Article 3</a></li> <li><a href="#" title="">Article 4</a></li> <li><a href="#" title="">Article 5</a></li> <li><a href="#" title="">Article 6</a></li> </ul> </div> </div> <div id="three_two"> <div class="item"> <h3>Comments</h3> <ul> <li><a href="#" title="">comment 1</a></li> <li><a href="#" title="">comment 2</a></li> </ul> </div> <div class="item"> <h3>What you need</h3> <p>Rterritus. Pax necne per, ymo invetero voluptas.</p> <ul> <li><a href="#">list point</a></li> <li><a href="#">list point</a></li> </ul> </div> </div> </div> <!-- End Column Three --> <!-- Begin Footer --> <div id="footer"> <ul> <li><a href="">your copyright note</a></li> <li><a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a></li> <li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li> <li><a href="http://www.kosikowski.de">design by supa</a></li> </ul> </div> <!-- End Footer --> </div> <!-- End Wrapper --> </body> </html>