CODEWITHSUNDEEP
css
InzeNL
InzeNL

Reputation: 23

Problems with 'floating' UL

.menu li {
    float: left;
    color: #fff;
    font-weight: bold;
}
.menu li a {
    display: block;
    height: 20px;
    min-width: 110px;
    text-decoration: none;
    border-radius: 3px;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: 25px;
    margin-right: 25px;
}
.menu li ul {
    display: none;
    max-width: 110px;
    padding: 4px;
    margin-left: 25px;
    margin-right: 25px;
    list-style: none !important;
    list-style-image: none !important;
}
.menu li a:hover {
    background-color: rgba(0, 88, 153, 0.8);
}
.menu li:hover ul {
    display: block;
    padding: 0;
    margin-top: 9px;
    list-style: none !important;
    list-style-image: none !important;
}
.menu li:hover ul a {
    display: block;
    background-color: rgba(0, 88, 153, 0.8);
    width: 110px;
    border-radius: 3px;
    padding-top: 6px;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: left;
    margin: 0;
    margin-bottom: 5px;

Above here the code I'm currently using, I want the UL to float above everything, I tried 'fixed' and 'absolute' but then it disappears, I tried to change 'margin-left' to 'inherit' but that didn't work either. I want the UL to float beneath the parent LI.

JSFiddle

Upvotes: 1

Views: 56

Answers (1)

Paulie_D
Paulie_D

Reputation: 115383

You need to position the submenu absolutely after first having positioned the parent li relative

HTML (Corrected) (with thanks to @Malcom for the container 

<div class="container">
<div class="menu">
    <ul>
        <li><a href="#">Home</a>

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

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

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

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

                </li>
            </ul>
        </li>
    </ul>
</div>
</div>
As you can see, this text moves when you hover 'Sub'

CSS (clipped to relevant parts)

.menu li {
    float: left;
    color: #fff;
    font-weight: bold;
    position: relative; /* this */
}

.menu li ul {
    position: absolute; /* this */
    display: none;
    max-width: 110px;
    padding: 4px;
    margin-left: 25px;
    margin-right: 25px;
    list-style: none !important;

list-style-image: none !important;

}

JSfiddle Demo

Upvotes: 1

Related Questions