4

I'm making a navigation menu. I got it all working now but when the sub menu pops up all the html is distorting. All the div's below are going downwards. Is there somebody who can help me? Here is the html with CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
    #body
    {
        width: 1200px;
    }
    ul{
        padding: 0;
        list-style: none;
    }
    ul li{
        float: left;
        width: 100px;
        text-align: center;
    }

    ul li a{
        display: block;
        padding: 5px 10px;
        color: #333;
        background: #f2f2f2;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul{
        display: none;
    }
    ul li:hover ul{
        display: block; /* display the dropdown */
    }
    #uldiv
    {
        width:1200px;
        float:left;
    }
    #secdiv
    {
        width:1200px;
        float:left;
    }
</style>
</head>
<body>
    <div id="uldiv">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products</a>
            <ul>
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
    </div>
    <div id="secdiv">
        here some text whish will not move while the menu is popping up.
    </div>
</body>
</html>
user2316116
  • 6,726
  • 1
  • 21
  • 35
hexedecimal
  • 279
  • 1
  • 2
  • 9

2 Answers2

3

You need to add :

ul li:hover ul {
    display: block; /* display the dropdown */
    position:absolute; /* <--- this line */
}

To take the submenu out of the document flow and doesn't push the below content down.

You also need to add :

ul li ul li{
    float:none;
}

So that the sub menu items don't display on the same line and stack below each other.

DEMO

Full code :

#body {
    width: 1200px;
}
ul {
    padding: 0;
    list-style: none;
}
ul li {
    float: left;
    width: 100px;
    text-align: center;
}
ul li a {
    display: block;
    padding: 5px 10px;
    color: #333;
    background: #f2f2f2;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}
ul li ul {
    display: none;
}
ul li:hover ul {
    display: block;
    /* display the dropdown */
    position:absolute;
}
ul li ul li{
    float:none;
}
#uldiv {
    width:1200px;
    float:left;
}
#secdiv {
    width:1200px;
    float:left;
}
<div id="uldiv">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li> <a href="#">Products</a>

            <ul>
                <li><a href="#">Laptops</a>
                </li>
                <li><a href="#">Monitors</a>
                </li>
                <li><a href="#">Printers</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Contact</a>
        </li>
    </ul>
</div>
<div id="secdiv">here some text whish will not move while the menu is popping up.</div>
Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
1

Give position:absolute to the ul

Fiddle

ul li ul {
    position:absolute;
    display: none;
}
Akshay
  • 14,138
  • 5
  • 46
  • 70