Question

我遇到的问题是，当我的CSS菜单回滚时，它会跳转到不同的位置。知道如何解决它吗？ JS在这里：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>

Answer 1

简单地向ul

添加填充0

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

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

}

当菜单回滚时，CSS下拉列表会跳转

1 个答案: