CODEWITHSUNDEEP
javascripthtmlcss
methuselah
methuselah

Reputation: 13206

CSS dropdown jumps when menu is rolled back up

I'm having an issue where my CSS menu jumps to a different position when it rolls back up. Any idea how I can fix it? JSfiddle here: http://jsfiddle.net/KVrFM/2/

CSS

#header_dropdown {
    float: right;
}
.click-nav {
    width: 200px;
}
.click-nav ul {
    position: relative;
}
.click-nav ul li {
    position: relative;
    list-style: none;
    cursor: pointer;
}
.click-nav ul li ul {
    position: absolute;
}
.click-nav ul .clicker {
    position: relative;
    background: #2284B5;
    color: #FFF;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
    background: #196F9A;
}
.click-nav ul li a {
    transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    display: block;
    background: #FFF;
    color: #333;
    text-decoration: none;
}
.click-nav ul li a:hover {
    background: #F2F2F2;
}
/* Fallbacks */
 .click-nav .no-js ul {
    display: none;
}
.click-nav .no-js:hover ul {
    display: block;
}
.active ul {
    padding: 0;
}

JavaScript

$(function () {
    $('.click-nav > ul').toggleClass('no-js js');
    $('.click-nav .js ul').hide();
    $('.click-nav .js').click(function (e) {
        $('.click-nav .js ul').slideToggle(200);
        $('.clicker').parent().toggleClass('active');
        e.stopPropagation();
    });
    $(document).click(function () {
        if ($('.click-nav .js ul').is(':visible')) {
            $('.click-nav .js ul', this).slideUp();
            $('.clicker').removeClass('active');
        }
    });
});

HTML

<div id="header_dropdown">
    <div class="click-nav">
        <ul class="no-js">
            <li> <a href="#" class="clicker">Profile</a>

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

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

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

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

                    </li>
                    <li><a href="#">Sign out</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 249

Answers (1)

Hushme
Hushme

Reputation: 3144

simple add padding 0 to the ul

http://jsfiddle.net/KVrFM/3/

.click-nav ul li ul {
    position: absolute;
    padding:0;

}

Upvotes: 2

Related Questions