Check this website My Html. When you hover to product, the menu will move down.. But how can you make the drop down appear without moving anything?Like the dropdown menu is on top and not inserted in between? Sorry but I am just a newbie to this.. Thanks.My Html Code<!DOCTYPE html><!-- Template by freewebsitetemplates.com --><html><head><meta charset="utf-8" /><title>LotMovement</title><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/13851636/style.css" media="all" /></head><body> <div id="header"> <div id="logo"> <a href="http://stackoverflow.com/questions/13851636/index.html"><img src="http://stackoverflow.com/questions/13851636/images/logo.jpg" alt="" /></a> </div> <nav> <ul> <li class="selected"><a href="http://stackoverflow.com/questions/13851636/index.html"><span>home</span></a></li> <li> <a href="http://stackoverflow.com/questions/13851636/about.html"><span>Product </span></a> <ul> <li> <a href="http://stackoverflow.com/questions/13851636/#">Input</a> </li> <li> <a href="http://stackoverflow.com/questions/13851636/#">Enquiry</a> </li> </ul> </li> <li><a href="http://stackoverflow.com/questions/13851636/services.html"><span>Movement</span></a></li> <li><a href="http://stackoverflow.com/questions/13851636/contact.html"><span>contact us</span></a></li> </ul> </nav> </div><div id="body"> <div class="header"> <div> <ul> <li><img src="http://stackoverflow.com/questions/13851636/images/discuss.jpg" alt="" /></li> <li><img src="http://stackoverflow.com/questions/13851636/images/graph.jpg" alt="" /></li> </ul> <div> <h3>Lot Movement Tracking System</h3> <form> User Name Pass Pasword </form> </div> </div> </div></div> <div id="footer"> <div> <div> <h3>AusTralAsia</h3> <ul> <ul> <li>+630212013129 -Main</li> </ul> </ul> </div> <div> <h3>europe</h3> <ul> <li>To Be Announced</li> </ul> </div> <div> <h3>canada</h3> <ul> <li>To Be Announced</li> <li></li> </ul> </div> <div> <h3>middle east</h3> <ul> <li>To Be Announced</li> <li></li> </ul> </div> <div> <h3>follow us:</h3> <a class="facebook" href="http://www.facebook.com/" target="_blank">facebook</a> <a class="twitter" href="http://twitter.com" target="_blank">twitter</a> </div> </div> <div> <p>© Copyright 2012. All rights reserved</p> </div> </div></body></html>My CSS/* Template by freewebsitetemplates.com */body { font-family: Arial, Helvetica, sans-serif; margin:0; padding: 0; }nav ul ul { display: none;} nav ul li:hover > ul { display: block; }#body { background: url(images/bg-content.gif) repeat-x top left; margin: 0; padding: 0; min-width: 960px;}#body .header { background: url(images/bg-body.gif) repeat-x bottom center; margin: 0 0 30px 0;}#body .header div { background: url(images/smiling-man.jpg) no-repeat bottom right; height: 472px; margin: 0 auto; padding: 0; width: 960px; }#body .header div div { background: none; margin: 0; padding: 0 0 0 13px; height: 200px; width: 490px;}#body .header div h3 { color: #2a4f5e; font-size: 20px; line-height: 30px; margin: 18px 0 0 0; padding: 0; text-shadow: 1px 1px 1px #fff;}#body .header div h3 span { display: block; font-size: 25px;}#body .header div h3 a { color: #2a4f5e; text-decoration: none; }#body .header div h3 a:hover { color: #507685; }#body .header div p { color: #507685; font-size: 14px; line-height: 24px; margin: 12px 0 6px 0; padding: 0; text-shadow: 1px 1px 1px #fff;}#body .header div p a { color: #507685; }#body .header div p a:hover { color: #2a4f5e; }#body .header ul { overflow: hidden; margin: 0; padding: 49px 0 0;}#body .header ul li { float: left; list-style: none; padding: 0 5px;}#body .body { border: 1px solid #e0e0e0; margin: 0 auto 34px auto; overflow: hidden; padding: 0 2px; width: 954px;} #body .body div { float: left; }#body .body .section { background: url(images/bg-section.gif) repeat-x top left; height: 193px; margin: 0; padding: 35px 0 0 40px; width: 186px; }#body .body .section img { display: block;}#body .body .section a { color: #2a4f5e; display: block; font-size: 14px; font-weight: bold; height: 145px; text-align: center; text-decoration: none; text-transform: uppercase; width: 145px;} #body .body .section a:hover { color: #507685; }#body .body .section img { border: 0; }#body .body .article { background: url(images/bg-article.gif) no-repeat top center; overflow: hidden; padding: 19px 16px; width: 470px; }#body .body .article img { border: 0; float: left; padding: 0 10px 0 0;} #body .body .article h4 { color: #2a4f5e; font-size: 15px; font-weight: bold; margin: 12px 0; padding: 0; }#body .body .article h4 a { color: #2a4f5e; text-decoration: none; }#body .body .article h4 a:hover { color: #507685; }#body .body .article p { color: #2a4f5e; font-size: 14px; line-height: 22px; margin: 0; padding: 0; }#body .body .article p a { color: #2a4f5e; }#body .body .article p a:hover { color: #346b84; }#body .footer { margin: 0 auto; overflow: hidden; padding: 0 0 15px 0; width: 960px; }#body .footer div { float: left; margin: 0; padding: 0;}#body .footer div ul { margin: 0; padding: 0; }#body .footer div ul li { list-style: none; margin: 0 0 15px; padding: 0 0 15px; }#body .footer h3 { color: #2a4f5e; font-size: 14px; line-height: 26px; margin: 0 0 12px 0; padding: 0; text-align: justify; text-transform: uppercase;}#body .footer h3 a { color: #2a4f5e; text-decoration: none;}#body .footer h3 a:hover { color: #507685; }#body .footer .section { padding: 0 10px; width: 220px; }#body .footer ul li { background: url(images/border-dashed.gif) repeat-x bottom left; }#body .footer ul li:last-child { background: none; }#body .footer li p { color: #5d5d5d; font-size: 14px; line-height: 20px; margin: 0; padding: 0; text-align: justify;}#body .footer li p a { color: #5d5d5d; text-decoration: underline;}#body .footer li p a:hover { color: #aeaeae; }#body .footer li span { color: #aeaeae; display: block; font-size: 10px; line-height: 16px; margin: 5px 0 0; padding:0;}#body .footer ul.news li p { background: url(images/bullets.gif) no-repeat 0 8px; padding: 0 0 0 15px;}#body .footer .featured { padding: 0 18px 0 24px; width: 438px; }#body .footer .featured ul li { overflow: hidden; }#body .footer .featured img { border: 1px solid #dbddde; float: left; margin: 0 20px 0 0; padding: 1px;}#body .footer .featured p { margin: 0; padding: 0; }#body .contact,#body .about,#body .services,#body .blog { margin: 0 auto; padding: 25px 10px 50px 10px; width: 940px;}#body h1 { color: #2a4f5e; font-size: 27px; font-weight: bold; height: 74px; line-height: 74px; margin: 0; padding: 0; text-indent: 10px; text-transform: uppercase; }#body .contact p { color: #7b7b7b; font-size: 15px; font-weight: bold; line-height: 26px; margin: 0; padding: 40px 0; text-align: justify; width: 830px;}#body .contact p a { color: #7b7b7b; }#body .contact p a:hover { color: #2a4f5e; }#body .contact div { margin: 0; padding: 0 0 30px 0; }#body .contact div h3 { color: #5d5d5d; font-size: 14px; font-weight: bold; margin: 0; padding: 0 0 5px 0; }#body .contact div ul { margin: 0; padding: 0 0 20px 0; }#body .contact div ul li { color: #5d5d5d; font-size: 14px; list-style: none; margin: 0; padding: 5px 0; }#body .about div { padding: 50px 0 0 0; }#body .about h2 { color: #2a4f5e; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-transform: uppercase;}#body .about p { color: #5d5d5d; font-size: 14px; line-height: 24px; margin: 10px 0 0; padding: 0; text-align: justify; width: 830px;}#body .about p a { color: #5d5d5d;}#body .about p a:hover { color: #2a4f5e; }#body .services div { overflow: hidden; margin: 0; padding: 40px 0 0;}#body .services h2 { color: #2a4f5e; font-size: 16px; font-weight: bold; line-height: 24px; margin: 0; padding: 0; text-transform: uppercase;}#body .services h2 a { color: #2a4f5e; }#body .services h2 a:hover { color: #507685; }#body .services h3 { color: #2a4f5e; font-size: 14px; font-weight: bold; line-height: 24px; margin: 15px 0 0; padding: 0 30px 0 0; text-transform: uppercase; }#body .services h3 a { color: #2a4f5e; }#body .services h3 a:hover { color: #507685; }#body .services h4 { color: #2a4f5e; font-size: 16px; font-weight: normal; line-height <ul>A 0; padding: 0; text-transform: uppercase; }#body .services p { color: #5d5d5d; font-size: 14px; line-height: 24px;}#body .services p a { color: #5d5d5d; }#body .services p a:hover { color: #2a4f5e; }#body .services div ul { float: left; margin: 0; padding: 20px 0 0; width: 312px; }#body .services div ul li { background: url(images/bullets.gif) no-repeat center left; color: #5d5d5d; font-size: 14px; list-style: none; margin: 0; padding: 5px 0 5px 12px; text-align: left;}#body .services div div { overflow: hidden; margin: 0; padding: 0 0 5px 0;}#body .services div div img { float: left; padding: 0 10px 0 0;}#body .services div div p { padding: 0 30px 0 0; text-align: justify; }#body .products { margin: 0 auto; padding: 25px 0 70px 0; width: 960px;} #body .products h2 { color: #2a4f5e; font-size: 26px; margin: 0; text-align: center; text-transform: uppercase; padding: 90px 0 30px 0; }#body .products p { color: #5d5d5d; font-size: 14px; line-height: 24px; margin: 0; padding: 0 10px; text-align: justify;}#body .products p a { color: #5d5d5d; }#body .products p a:hover { color: #2a4f5e; }#body .products div { overflow: hidden; margin: 0 0 45px 0; padding: 0;}#body .products div div { float: left; margin: 0; padding: 0 10px; text-align: center; width: 300px; }#body .products div div h3 { color: #2a4f5e; font-size: 16px; line-height: 24px; margin: 0; padding: 0 0 10px 0; text-align: justify; text-transform: uppercase;}#body .products div p { font-size: 16px; }#body .products div div p { font-size: 14px; margin: 0; padding: 0; text-align: justify; }#body .blog { overflow: hidden; }#body .blog div { float: left; padding: 60px 0 0 0; width: 630px; }#body .blog ul { float: left; margin: 0; padding: 38px 0 0 30px; width: 280px; }#body .blog ul li { background: url(images/border-dashed.gif) repeat-x bottom left; list-style: none; margin: 0; padding: 22px 0; }#body .blog ul li:last-child { background: none; }#body .blog h2 { color: #2a4f5e; font-size: 16px; margin: 0; padding: 0; text-transform: capitalize; }#body .blog h3 { color: #5d5d5d; font-size: 14px; margin: 0; padding: 0; text-align: justify; }#body .blog h3 a { color: #5d5d5d; }#body .blog h3 a:hover { color: #2a4f5e; }#body .blog p { color: #5d5d5d; font-size: 14px; line-height: 24px; margin: 0; padding: 0; text-align: justify;}#body .blog p a { color: #5d5d5d; }#body .blog p a:hover { color: #2a4f5e; }#body .blog div p { padding: 15px 0; }#body .blog div p.article { font-weight: bold; }#footer { background: #f5f5f5 url(images/bg-footer.gif) repeat-x top left; margin: 0; min-width: 960px; padding: 0;}#footer div { margin: 0 auto; overflow: hidden; padding: 26px 0 0; width: 960px;}#footer div div { float: left; margin: 0; padding: 0; text-align: center; width: 192px; }#footer div div h3 { color: #818a8c; font-size: 12px; font-weight: bold; margin: 0 0 5px 0; padding: 0; text-transform: uppercase;}#footer div div ul,#footer div div ul li { margin: 0; list-style: none; padding: 0; } #footer div div ul li { font-size: 12px; line-height: 22px; color: #818a8c; }#footer div a.facebook,#footer div a.twitter { display: block; float: left; height: 27px; margin: 10px 0 0; text-indent: -99999em; width: 40px; }#footer div a.facebook,#footer div a.twitter { background: url(images/icons.gif) no-repeat; }#footer div a.facebook { background-position: 0 0; margin: 10px 0 0 58px; _margin: 10px 0 0 28px;}#footer div a.twitter { background-position: 0 -37px;}#footer div p { color: #c1c1c1; font-size: 12px; margin: 0; padding: 0 0 30px 0; text-align: center; text-shadow: 1px 1px 1px #fff;}
Dropdown Menu will move all <Div> Below. How to prevent it?
- Thread starter ThienHieu
- Start date