CSS: drop-down causes page to jump up - html

Question

When user clicks on my drop-down menu, it jumps the page back to the very top (like a page reload).
See this jsFiddle with stripped down code.
I know that if I remove the # in href="#", it should work, but that is not good practice.
How do I make it so it doesn't jump the page to top?
HTML:
<div class="nav">
<ul>
<li>
Drop
<ul class="nav-user nav-li-cont">
<li> Hello
</li>
<li> World
</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

That's because there's no js/jquery assigned to that link. And the browser will assume that this is a "link for a new page", and actually if you check the URL of the website, it's propably changed to this after you click on that button (you can't see this on jsfiddle): example.com/currentPage/#.
If you change this line
Drop
to this instead
Drop
it will not jump to the top anymore. The void operator is often used merely to obtain the undefined primitive value (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).
http://jsfiddle.net/3837z3b0/3/
Update
If you have multiple links using href="#" you can either exchange the links as I mentioned above to this href="javascript:void(0)" or you can add a class called noclick for example for every link that has href="#" and add the following:
$(".noClick").attr('href','javascript:void(0)');
http://jsfiddle.net/3837z3b0/4/