CODEWITHSUNDEEP
jqueryhtmlcssmenu
llanato
llanato

Reputation: 2491

Weird Dropdown Behaviour

I've a very confusing issue where the li with class 'search is moved down under the dropdown box when it is shown, all other li's stay in place where they should be, any suggestions?

It's only when the dropdown is displayed otherwise the 'search' li appears and works as expected.

http://i43.tinypic.com/2z686md.png

EXAMPLE

HTML:

<ul class="nav">
    <li class="first"><a href="/">HOME</a></li>
    <li>
        <a href="#">CATEGORIES<span class="arrow"></span></a>
        <div class="dropdown">
            <div class="error">Unable to find category listings.</div>
        </div>
    </li>
    <li class="search">
        SEARCH:&nbsp;<input type="text" name="search">
    </li>
</ul>

CSS:

ul.nav .dropdown {
    position: relative;
    width: 98%;
    height: 130px;
    margin-top: 38px;
    margin-left: -2%;
    padding: 2%;
    color: #FFFFFF;
    background: #0F2F54;
    opacity: 0.95;
    z-index: 1;
}
ul.nav li .dropdown {
    display: none;
}
ul.nav li:hover .dropdown {
    display: block; 
}
.dropdown ul.category li a {
    width: 23%;
    color: #FFFFFF;
    font-size: 20px;
    border-right: none;
}
.dropdown ul.category li a:hover {
    background: none;
    text-decoration: underline;
}
ul.nav li.search {
    float: right;
    height: 32px;
    margin-right: 2%;
    padding: 6px 10px 0 10px;
    border-left: 1px #336198 solid;
    border-right: 1px #336198 solid;
    display: inline;
}
ul.nav li.search input {
    width: 200px;
    padding: 4px;
}

Javascript:

$("ul.nav .dropdown").on({
    mouseenter: function () {
        $(this).prev().css('background', '#0F2F54');
    },
    mouseleave: function () {
        $(this).prev().css('background', '');
    }
});

Upvotes: 0

Views: 49

Answers (3)

3bu1
3bu1

Reputation: 985

in your css .dropdown class has position:relative that means it aligns itself relative to its adjacent elements changing it to absolute will make .dropdown align as per absolute position.

ul.nav .dropdown {
    position: absolute;
    width: 98%;
    height: 130px;
    margin-top: 38px;
    margin-left: -2%;
    padding: 2%;
    color: #FFFFFF;
    background: #0F2F54;
    opacity: 0.95;
    z-index: 1;
}

Upvotes: 0

user3227019
user3227019

Reputation:

Here is a fix for your code, just making the dropdown class as absolute will not affect other elements on the page.

fiddle

Upvotes: 1

semirturgay
semirturgay

Reputation: 4201

make the position of dropdown absolute; DEMO

Upvotes: 0

Related Questions