Two navigation bars in HTML & CSS problem

by dragonballzgtfighter December 21st 2009, 3:54 pm

Could someone please help with the problem that I have. Thank you.

The horizontal navigation bar does not fully appear.

I also want to know how to make the horizontal navigation bar appear across much like the red section that is above it.

I also want to know how to make this horizontal navigation bar center across.

Code:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> <title>Title of the document</title> <style type="text/css">  </style> </head> <body> <div id="page"> <div id="header"> <p> </p> <p> </p> </div> <div id="nav"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a></li> </ul> </li> <li> <a href="#">portolio</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a></li> </ul> </li> <li><a href="#">about</a></li> <li><a href="#">contact</a> </li> </ul> </div> <p> </p> <p> </p> <p> </p> <div id="container"> <div class="left"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a></li> </ul> </li> <li> <a href="#">portolio</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a></li> </ul> </li> <li><a href="#">about</a></li> <li><a href="#">contact</a> </li> </ul> </div> <div id="right"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="post"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> <div id="footer">this is footer</div> </div> </body> </html>

Code:: * { margin: 0px; padding: 0px; } #page{ background-color: #33C } #header{ background-color: #F00; padding: 5px; margin: 5px text-align: justify; } #nav { padding: 0; margin: 0; } #nav ul { list-style-type: none; } #nav ul li { position: relative; float: left; } #nav ul li a { display:block; padding:10px 0; width:100px; background-color: #F90; text-align:center; text-decoration:none; color: #000; } #nav ul li a:hover { display:block; padding:10px 0; width:100px; background-color: #0CF; text-align:center; text-decoration:none; } #nav ul li ul { display: none } #nav ul li:hover ul { display: block; position: absolute; } #nav ul li ul li a { background-color: #F00; } #container{ background-color: #C66; padding: 5px; margin: 5px; position: relative } .left{ } .left ul { padding:0; position:absolute; margin:0; } .left ul li { margin:0; padding:0; list-style-type: none; position:relative; } .left ul li a { display:block; padding:10px 0; width:100px; background-color: #F90; text-align:center; text-decoration:none; color: #000; } .left ul li a:hover { display:block; padding:10px 0; width:100px; background-color: #0CF; text-align:center; text-decoration:none; } .left ul li ul { display:none; !important ; } .left ul li:hover ul { display:block; !important position:absolute; left:100px; top: 0; } .left ul li ul li a { background-color: #F00; } #right{ background-color: #F90; float: right; width: 100px; padding: 5px; } #post{ background-color: #FF0; margin-right: 250px; margin-left: 250px; padding: 10; } #footer{ background-color: #09F; clear: both; background-position: bottom; padding: 10px; }