html - 如何将悬停时的下拉菜单定位到所需位置?

标签 html css drop-down-menu menu

我想创建这个菜单,悬停时会出现一个下拉菜单,通常我可以毫不费力地将 UL 设置为 top:100%。然而这次我需要它更进一步,但它需要精确以便跨浏览器友好。所以我尝试的是为 UL 容器设置一个 margin-top:17px 以将其从顶部推开并且有效但是一旦我将鼠标悬停在它上面,下拉菜单就会关闭。我在示例中添加了一个红色边框,以显示我希望下拉列表 UL 顶部开始的位置。

请看-> Link to example

最佳答案

您应该使用 padding-top 而不是 margin-top(因为边距在元素之外并中断悬停事件):

#main-nav ul ul {display:none;position:absolute;top:100%;left:0;padding-top:17px;min-width:150px;}

#main-nav ul ul li {background-color:#000;opacity:0.8;filter:alpha(opacity=80);}

您还需要将背景声明从 ul 移动到 li,因为 padding 会将元素移动到所需位置,但背景会显示错误(在父 li 下)。

关于html - 如何将悬停时的下拉菜单定位到所需位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10873796/

相关文章:

javascript - jQuery 属性 ("src") 返回未定义

javascript - 我将如何即时动态创建输入框?

javascript - 将下拉内容与下拉按钮对齐

javascript - 链接下拉列表和加载 div

javascript - MD-chips 电子邮件验证

javascript - 调试 javascript,同时检查 html 和 css 的变化

html - 悬停时更改选择列表选项的背景颜色

html - <object> 标签如何影响表单提交

css - float 用作内联样式,但当我将其移至外部样式表时则不起作用

javascript - 预加载器动画不起作用