我有一个浮动的弹出菜单（位置：固定），如果你在向下滚动页面后点击它就会给我一个奇怪的小问题。如果您的鼠标恰好是子菜单在打开时与主菜单重叠的位置，那么一切都很好。但是，如果您的鼠标没有重叠，页面会跳到右上角（我认为有些人可能会觉得有些混乱）。
有没有办法解决这个问题，最好只使用HTML和CSS？
HTML：
<div id="menu">
<ul class="levelone" >
<li class="active"><a href="#"> Home</a></li>
<li class="fly"><a href="#"> 1</a></li>
<li class="fly"><a href="#"> 2 » </a>
<ul class="dropdown d1">
<li class="fly"><a href="#">2a</a></li>
<li class="fly"><a href="#">2b</a></li>
<li class="fly"><a href="#">2c</a></li>
</ul>
</li>
<li class="fly"><a href="#"> 3 » </a>
<ul class="dropdown d1">
<li><a href="#">3a</a></li>
<li><a href="#">3b</a></li>
</ul>
</li>
<li class="fly"><a href="#"> 4</a></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;}
答案 0 :(得分：2)
此行为是由更高级别链接中的href属性引起的。
锚标记<a>应该仅用于导航，而不是用作虚拟“可聚焦”项目。 问题是这些高级按钮用于打开子菜单，而不是导航到文档中的给定位置。
通常情况下，纯HTML / CSS下拉菜单很难设置，但鉴于您所做的事情，我建议您为上层项目使用一些无样式的<button>标记（和<a>对于实际的锚点）。它们有助于更好地适应语义，并使您免于href="#"或href="javascript:void(0)"等占位符。
除了纯语义之外，具有虚拟href的解决方案更加hacky且有点干扰因为某些浏览器将它们显示为屏幕底部的链接目标（当它应该对用户隐藏时）透视）。作为用户，当显示此类内容时，它真的很烦人。
我建议this question首先使用按钮或链接。
这是一个有效且语义清晰的工作jsFiddle。
答案 1 :(得分：1)
<a href="#"></a>您的链接href中的#将链接到页面顶部（导致您的跳转）。
将其替换为此<a href="javascript:void(0)">
当锚中使用#时，通常会跟一个ID，例如<a href="#HelpSection">这是一种可以链接到当前页面（甚至是不同页面）上的ID的方法。由于您没有添加ID，它将跳转到页面顶部。
答案 2 :(得分：-1)
使用此代码更新css和html，我根据我的理解进行了更新
#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"><a href="#"> Home</a></li>
<li class="fly"><a href="#"> 1</a></li>
<li class="fly"><a href="#"> 2 » </a>
<ul class="dropdown d1">
<li class="fly"><a href="#">2a</a></li>
<li class="fly"><a href="#">2b</a></li>
<li class="fly"><a href="#">2c</a></li>
</ul>
</li>
<li class="fly"><a href="#"> 3 » </a>
<ul class="dropdown d1">
<li><a href="#">3a</a></li>
<li><a href="#">3b</a></li>
</ul>
</li>
<li class="fly"><a href="#"> 4</a></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>