CSS：下拉导致页面跳转

Question

当用户点击我的下拉菜单时，它会将页面跳回到最顶部（就像重新加载页面一样）。

查看这个 jsFiddle 精简代码。

我知道如果我删除 href="#" 中的 #，它应该可以工作，但这不是好的做法。

如何才能让它不跳转到顶部？

HTML:

<div class="nav">
    <ul>
        <li>
            <a href="#">Drop</a>

            <ul class="nav-user nav-li-cont">
                <li><a href="/"> Hello </a>

                </li>
                <li><a href="/"> World </a>

                </li>
            </ul>

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

CSS:

div.nav {
    display: inline-block;
    margin-left:50px;
}
div.nav ul {
    padding: 0;
    margin: 0;        
    list-style-type: none;
    position: relative;
}

div.nav ul li {
    float:left;
}

div.nav ul li a {
    text-decoration: none;
}

div.nav ul li ul { 
    display:none;
}

div.nav ul li:hover ul {
    display: list-item;
    position: absolute;
}


div.nav ul li:hover ul li {
    float:none;
}

div.nav ul li ul li:hover {
    float:none;
}

div.nav ul li ul li a {
    text-decoration: none;
    cursor: pointer;
    float:left;
    width:100%;
}

.nav-li-cont {
    border-radius: 4px;
    float: left !important;
    padding: 10px !important;
}

Answer 1

那是因为没有 js/jquery 分配给那个 link。并且浏览器会假设这是一个 "link for a new page"，实际上如果你检查网站的 URL，它可能会在你点击那个按钮后更改为这个（你在 jsfiddle 上看不到这个): example.com/currentPage/#.

如果你改变这一行

<a href="#">Drop</a>

改成这个

<a href="javascript:void(0)">Drop</a>

它不会再跳到顶部了。 The void operator 通常仅用于获取 undefined 原始值（相当于“void 0”）。在这些情况下，可以使用全局变量 undefined 代替（假设它没有被分配给非默认值）。

http://jsfiddle.net/3837z3b0/3/

更新

如果你有多个 links 使用 href="#" 你可以像我上面提到的那样交换 links 到这个 href="javascript:void(0)" 或者你可以添加一个 class 为每个具有 href="#" 的 link 调用了 noclick 并添加以下内容：

$(".noClick").attr('href','javascript:void(0)');

http://jsfiddle.net/3837z3b0/4/

CSS：下拉导致页面跳转

CSS: drop-down causes page to jump up

html

css

drop-down-menu

更新