Dropdown Menu will move all
Below. How to prevent it?


Tags: html,css

Problem :

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="style.css" media="all" />
</head>
<body>
    <div id="header">
            <div id="logo">
                <a href="index.html"><img src="images/logo.jpg" alt="" /></a>       
            </div>      
            <nav>
            <ul>
                <li class="selected"><a href="index.html"><span>home</span></a></li>
                <li>
                  <a href="about.html"><span>Product </span></a>


                        <ul>
                             <li>
                                <a href="#">Input</a> 
                            </li>

                            <li>
                                <a href="#">Enquiry</a> 
                            </li>

                        </ul>



                </li>
              <li><a href="services.html"><span>Movement</span></a></li>

                <li><a href="contact.html"><span>contact us</span></a></li>         
            </ul>
            </nav>
    </div>
<div id="body">
        <div class="header">
            <div>
                <ul>
                    <li><img src="images/discuss.jpg" alt="" /></li>    

                  <li><img src="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>&copy 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;
}


Solution :

Try adding position: absolute; property to the ul element:

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    position: absolute;
    display: block;
}

    CSS Howto..

    Changing opacity for div in div - is this possible? How?

    How to import a css file only for Firefox but not for other browsers?

    How to force text to wrap inside inline-block div?

    How to test file size on rspec (Rails 4/rspec3)

    How to find everything that is not matching a regular expression

    How to make text run top-to-bottom in CSS?

    css navbar how to make the text in navbar padding from top without increasing the height of the navbar

    How can I center my ul li list inside my div?

    CSS: how to enforce word wrap on an odd situation?

    How to specify different Css for different Mobiles (BB, Iphone, Nexus… )

    how to change CSS styles dynamically using php/Mysql..i want to create themes that are unique to each user?

    How can I prevent divs animated using CSS keyframes from colliding

    How to Add a Vertical Line inside a texbox using html and css

    how can the value of an href attribute be changed using javascript/css?

    How to create a scrolling background image with css/jquery/html

    How to loop animated text banners using css keyframes

    How to get Jsfiddles working on a website? [duplicate]

    How to remove space from top of web page

    How do I stop and change a CSS keyframe in Javascript?

    ASP Listview. How to hide a table row using CSS

    How to fade out after hover is done using CSS

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    How to create directional two pointed arrow using css?

    How to write a more specific css

    How to Set Up a Responsive Background-Image with CSS

    How to bundle Angular 2 component css?

    How can I animate this?

    How to position div at the bottom of a page

    How to select nth sibling after specific class based on any number multiple with CSS? [duplicate]

    How to float inline elements with css