Geek Answers Handbook

Menu hover without distortion

I am creating a navigation menu. Now everything works, but when the submenu pops up, everything html distorts. All the lower ones go down. Is there anyone 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>
+4
source share
2 answers

You need to add:

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

To take a submenu from the document flow and not click below the contents.

You also need to add:

ul li ul li{
    float:none;
}

To prevent submenu items from appearing on the same line and stack one after the 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>
Run codeHide result
+3
source

Give position:absolute ul

Fiddle

ul li ul {
    position:absolute;
    display: none;
}
+1
source

More articles:


All Articles