Floating menu jumps to top of page when sub-menu clicked - html

Question

I have a floating pop-out menu (position:fixed) that is giving me a weird little problem if you click it after you have scrolled down the page. If your mouse happens to be where the sub-menu overlaps with the main menu when it opens, everything is fine. However if your mouse is not in the overlap, the page jumps right to the top (which I think some people might find a little confusing).
Is there any way to fix this, preferably just using just HTML and CSS?
HTML:
<div id="menu">
<ul class="levelone" >
<li class="active"> Home</li>
<li class="fly"> 1</li>
<li class="fly"> 2 »
<ul class="dropdown d1">
<li class="fly">2a</li>
<li class="fly">2b</li>
<li class="fly">2c</li>
</ul>
</li>
<li class="fly"> 3 »
<ul class="dropdown d1">
<li>3a</li>
<li>3b</li>
</ul>
</li>
<li class="fly"> 4</li>
</ul>
</div>
CSS:
#menu {display:initial; position:fixed; z-index:500; width: 150px;vertical-align: top;line-height: 200%;}
#menu ul {padding:0; margin:0; list-style:none; padding: 0;list-style: none;margin: 0px;}
#menu ul ul {z-index:501; position:absolute; left:-9999px; width:150px;}
#menu ul li {margin-right:5px; float:left;position:relative;line-height: 200%;position: relative;}
#menu ul li a {display:block; float:left; text-decoration:none;width: 150px;;display: block;line-height: 200%; text-align:center; border: 1px solid grey;background: white; }
#menu ul ul li {margin:0;}
#menu ul ul li a {text-align:center; width:144px;}
#menu ul li a:active + ul.dropdown {left:130px; }
#menu ul li a:focus + ul.d1,
#menu ul li a:focus + ul.d2 {left:130px}
#menu ul li ul.dropdown:hover {left:130px}
#menu ul li ul li{background: #999999}
#menu ul li a:hover{ color: #FFF; background: #333;}
#menu li.active > a,
#menu li.active > a:hover,
#menu li.active > a:focus { color: #fff; background-color: #337ab7;}
Fiddle here.

Answer 1

This behaviour is due to the href attribute in the higher level link.
The anchor tag <a> should be used only to navigate, not as dummy "focusable" item. The problem is that these high level buttons are intended to open a sub-menu, not to navigate to a given location in the document.
Solution
Typically, pure HTML/CSS dropdown menus are hard to set up, but given what you have done, I would suggest you to use some unstyled <button> tags for the upper level items (and <a> for actual anchors). They have the benefit to better fit semantically and free you from placeholders like href="#" or href="javascript:void(0)".
Beyond pure semantic, the solutions with the dummy href is more hacky and a bit intrusive because some browsers shows them as the link target on the bottom of the screen (when it should be hidden from users perspective). As a user its really annoying when such content is displayed.
I recommend this question about using a button or a link in the first place.
Code
Here is a working jsFiddle with proper semantic and clean rendering.

Answer 2

The # in your link href will link to the top of the page (causing your jump).
Replace it with this <a href="javascript:void(0)">
When the # is used in an anchor, it is usually followed by an ID e.g. <a href="#HelpSection"> this is a way that you can link to an ID on the current page (or even a different page). As you are not adding an ID, it will jump to the top of the page.

Answer 3

Update css and html with this code, i had made update as i understand
#menu {display:initial; position:fixed; z-index:500; width: 150px;vertical-align: top;line-height: 200%;top:10px;}
#menu ul {padding:0; margin:0; list-style:none; padding: 0;list-style: none;margin: 0px;}
#menu ul ul {z-index:501; position:absolute; left:-9999px; width:150px;}
#menu ul li {margin-right:5px; float:left;position:relative;line-height: 200%;position: relative;}
#menu ul li a {display:block; float:left; text-decoration:none;width: 150px;;display: block;line-height: 200%; text-align:center; border: 1px solid grey;background: white; }
#menu ul ul li {margin:0;}
#menu ul ul li a {text-align:center; width:144px;}
#menu ul li a:active + ul.dropdown {left:130px; }
#menu ul li a:focus + ul.d1,
#menu ul li a:focus + ul.d2 {left:130px}
#menu ul li ul.dropdown:hover {left:130px}
#menu ul li ul li{background: #999999}
#menu ul li a:hover{ color: #FFF; background: #333;}
#menu li.active > a,
#menu li.active > a:hover,
#menu li.active > a:focus { color: #fff; background-color: #337ab7;}
#wrapper{padding-top: 180px;}
<div id="wrapper">
<div id="menu">
<ul class="levelone" >
<li class="active"> Home</li>
<li class="fly"> 1</li>
<li class="fly"> 2 »
<ul class="dropdown d1">
<li class="fly">2a</li>
<li class="fly">2b</li>
<li class="fly">2c</li>
</ul>
</li>
<li class="fly"> 3 »
<ul class="dropdown d1">
<li>3a</li>
<li>3b</li>
</ul>
</li>
<li class="fly"> 4</li>
</ul>
</div>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
</div>