Hey guys long time no speak.
So the problem I have is that I have a vertical drop down (or right) menu.
For some unknown reason the 2nd unordered list falls a line below the parent list item. As you can understand not too good. So far I have not tested it in any other browsers 'cause firefox usually displays it right.
I have the files here and I will post them. Basicly I have the index.php document, style.css stylesheet and menu.css stylesheet that sorts out the menu so thats probably your best bet.
Although I don't think it is the style.css it could be but this is only used for the wrappers.
I know what it's doing I just don't know why. I have removed all padding and margin (bar left) from the child unordered list.
So heres the documents.
INDEX.PHP / INDEX.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Jjcon Web Development & Hosting Solutions</title> <link rel="stylesheet" media="screen" type="text/css" href="style.css" /> <link rel="stylesheet" media="screen" type="text/css" href="menu.css" /> </head> <!-- Slogan: Jjcon - Think Different (Possible) Jjcon - be prepared for the future Design> Color Scheme: <a href="http://127.0.0.1/www/jjcon/develop/hex's.html " rel="nofollow">http://127.0.0.1/www/jjcon/develop/hex's.html </a> Simple Warming - but not too bright JS Lightbox Ideas: PHP, JavaScript & AJAX programming Hosting solutions - only for customers (Services) Web Design Free domain name MySql Programming --> <body> <div class="shadow_main_wrapper"> <div id="main_wrapper"> <div id="banner"> <img class="logo_img" src="img/logo_img.png" alt="Logo" /> <span class="SiteName">Jjcon</span> <span class="SiteSlogan">Jjcon - be prepared for the future.</span> <span class="SiteDets">PSD 2 XHTML - Website Programming - Website Design - Hosting Solutions - Affordable</span> <span class="SiteDets2"> <img src="img/phone.png" alt="Phone" /> 01249 464648 <img src="img/email.png" alt="Email" /> </p> <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%63%6f%6e%74%61%63%74%40%6a%6a%63%6f%6e%2e%63%6f%2e%75%6b%22%3e%63%6f%6e%74%61%63%74%40%6a%6a%63%6f%6e%2e%63%6f%2e%75%6b%3c%2f%61%3e%27%29%3b'))</script><p></span> </div> <div id="content_wrapper"> <div id="left_bar"> <div id="menu_wrapper"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">Examples</a></li> <li><a href="#">Offers</a></li> <li><a href="#">Price Guide</a></li> <li><a href="#">Quote</a></li> </ul> </li> <li><a href="#">Web Programming</a> <ul> <li><a href="#">Examples</a></li> <li><a href="#">Offers</a></li> <li><a href="#">Price Guide</a></li> <li><a href="#">Quote</a></li> </ul> </li> <li><a href="#">PSD 2 XXX</a> <ul> <li><a href="#">PSD 2 XHTML</a></li> <li><a href="#">PSD 2 HTML</a></li> <li><a href="#">Examples</a></li> <li><a href="#">Offers</a></li> <li><a href="#">Price Guide</a></li> <li><a href="#">Quote</a></li> </ul> </li> <li><a href="#">Hosting Solutions</a> <ul> <li><a href="#">Price Guide</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> <div id="main_content"> Blah Blah </div> </div> <div id="footer_wrapper"> </div> </div> </div> </body> </html>
STYLE.CSS
body { margin: 0; padding: 0; background-image: url(img/main_bg.png); background-color: #fff; } .shadow_main_wrapper { width: 90%; background: url(img/shadow.png); padding-top: 0.1em; padding-left: 0.6em; padding-bottom: 0.6em; padding-right: 0.3em; margin: 0 auto; margin-top: 2em; } #main_wrapper { width: 100%; min-height: 500px; margin: 0 auto; border: solid 1px #000; background: #fff; } #banner { background: url(img/ban_bg.png); width: 100%; border-bottom: solid 1px #000; overflow: hidden; } #banner .logo_img { float: left; margin-left: 20px; } #banner .SiteName { font-size: 400%; color: #B26B00; display: block; width: 100%; text-align: center; font-family: Myriad Pro; } #banner .SiteSlogan { width: 100%; display: block; text-align: center; font-size: 150%; color: #fff; font-family: Comic Sans MS; } #banner .SiteDets { width: 100%; text-align: center; display: block; color: #cccccc; font-family: Tahoma; } #banner .SiteDets2 { width: 100%; text-align: center; display: block; color: #cccccc; font-family: Tahoma; line-height: 20px; } #content_wrapper { width: 100%; } #left_bar { width: 15%; float: left; } #main_content { width: 70%; float: left; } #menu_wrapper { width: 100%; }
MENU.CSS
#nav li ul { display: none; position: absolute; float: right; margin: 0; padding: 0; margin-left: 10%; } #nav { padding: 0; margin: 0; } #nav li:hover ul { display: inline; } #nav li { background: #809FFE; list-style-type: none; padding: 2px; } #nav li a { background: #809FFE; border: solid 1px #fff; display: block; width: 100%; text-align: center; }
Thanks for any help in advance.
EDIT:
For the live thing go here.