Html 单击子菜单时，浮动菜单跳转到页面顶部
我有一个浮动弹出菜单（位置：固定），如果你在向下滚动页面后单击它，会给我带来一个奇怪的小问题。如果鼠标打开时恰好位于子菜单与主菜单重叠的位置，则一切正常。但是，如果鼠标不在重叠处，页面会直接跳到顶部（我想有些人可能会觉得有点困惑） 有没有办法解决这个问题，最好只使用HTML和CSS HTML: .Html 单击子菜单时，浮动菜单跳转到页面顶部,html,css,Html,Css,我有一个浮动弹出菜单（位置：固定），如果你在向下滚动页面后单击它，会给我带来一个奇怪的小问题。如果鼠标打开时恰好位于子菜单与主菜单重叠的位置，则一切正常。但是，如果鼠标不在重叠处，页面会直接跳到顶部（我想有些人可能会觉得有点困惑） 有没有办法解决这个问题，最好只使用HTML和CSS HTML: .链接href中的#将链接到页面顶部（导致跳转） 将其替换为此 当锚定中使用#时，它后面通常跟着一个ID，例如这是一种可以链接到当前页面（甚至不同页面）上的ID的方法。由于您没有添加ID，它将跳转到页面顶
#当锚定中使用
##菜单{显示：初始；位置：固定；z索引：500；宽度：150px；垂直对齐：顶部；线条高度：200%；顶部：10px；}
#菜单ul{填充：0；边距：0；列表样式：无；填充：0；列表样式：无；边距：0px；}
#菜单ul ul{z-index:501；位置：绝对；左：-999px；宽度：150px；}
#菜单ul li{右边距：5px；浮动：左；位置：相对；线高度：200%；位置：相对；}
#菜单ul li a{显示：块；浮动：左；文本装饰：无；宽度：150px；；显示：块；线宽：200%；文本对齐：中心；边框：1px纯灰；背景：白色；}
#菜单ul li{边距：0；}
#菜单ul li a{文本对齐：中心；宽度：144px；}
#菜单ul li a:active+ul.dropdown{left:130px；}
#菜单ul li a：焦点+ul.d1，
#菜单ulli a:focus+ul.d2{左：130px}
#菜单ul li ul.下拉菜单：悬停{left:130px}
#菜单ul li ul li{背景：#999999}
#菜单：悬停{颜色：#FFF；背景：#333；}
#菜单li.active>a，
#菜单li.active>a：悬停，
#菜单li.active>a:focus{color:#fff；背景色：#337ab7；}
#包装器{padding top:180px；}
-
-
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
首先是关于使用按钮或链接的
代码
这是一个具有正确语义和清晰呈现的工作模式。Thx用于小提琴！让我们的生活更轻松。我的问题是因为我没有意识到锚给我带来了问题，我正在寻找一个非JS的解决方案。另一个问题来自一位已经知道锚存在问题的人，他们正在寻找一个JS解决方案。谢谢，这为我解决了它。只是为了帮助-参考downvoter使用@downvoter。这将向downvoter发送一个通知谢谢你的回答（顺便说一句，我没有投反对票），它显然是有效的（也谢谢你的提琴：），但它在功能上是否会起作用？我不确定屏幕底部的多余链接目标是否足以保证额外的代码删除它，如果功能没有受到任何影响。@ MarkHamill，那么你可能会考虑使用空白链接的其他缺点：中间点击打开空白标签（或者移动/平板上的其他控件-长按？）通过外部工具（最重要的是自己）进一步处理内容可能会成为一种痛苦。最后，按钮的方式是亲吻的方式。这不仅仅是关于您的特定问题，对于稍后阅读本文的人来说：清晰性导致可维护性，可维护性导致更理智的开发人员：顺便说一句，我不确定“它可以工作”不应该是平台上推广好代码的唯一有效论据。：）感谢您的回复，您说服我将有问题的锚更改为按钮：）
<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>
#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;}