CODEWITHSUNDEEP
htmlcsslistlayoutmenu
Razman
Razman

Reputation: 13

How can I prevent my horizontal menu to break my site layout?

Here is the JSfiddle http://jsfiddle.net/sgmxh1hg/

Here is the HTML:

<header>
    <nav>
        <ul id="menu">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">News</a>
            </li>
            <li id="streams">
                <a href="#">Streams</a>
                <ul id="submenu">
                    <li><a href="#">First link</a>
                    </li>
                    <li><a href="#">Second link</a>
                    </li>
                    <li><a href="#">Third link</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Tournaments</a>
            </li>
        </ul>
    </nav>
</header>

And here is the CSS:

header {
    position: relative;
    display: block;
    width: 100%;
    height: 30px;
    background: -webkit-linear-gradient(#eeb418, #e59313);
    background: -o-linear-gradient(#eeb418, #e59313);
    background: -moz-linear-gradient(#eeb418, #e59313);
    background: linear-gradient(#eeb418, #e59313);
    margin: 0px;
    padding: 0px;
    font-family:"Verdana", "Arial", sans-serif;
    font-size: 1.4em;
}
ul {
    list-style-type: none;
}
nav ul {
    padding: 0px;
    margin: 0px;
}
nav li {
    float: left;
    line-height: 30px;
    vertical-align: middle;
}
#menu a {
    display: block;
    padding: 0px 10px;
    color: #f4f4f4;
    text-decoration: none;
}
#menu li:hover {
    color: white;
    background: #eeb418;
}
#menu li:hover a {
    color: white;
}
#submenu li {
    float: none;
}
#submenu li {
    float: none;
    display: none;
}
#streams:hover ul li {
    display: block;
}

If you hover over "Streams" in the menu, when the submenu appears the layout of the site breaks. Why is that happening and how can I fix that?

Upvotes: 1

Views: 65

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241078

The most common way to achieve this is to absolutely position the element. In this case, you would be absolutely positioning the direct ul element. In doing so, the element is essentially removed from the normal flow. The other elements will therefore remain unaffected when hovering over the menu, and it will no longer break your layout.

Updated Example

#menu > li > ul {
    position: absolute;
    background: #eeb418;
}

Upvotes: 2

Related Questions