个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试构建一个带有子菜单弹出窗口的简单 HTML+CSS 菜单。
如果一个列表项有一个子列表并且被悬停，子列表就会出现。这已经有效了。
但我希望父元素位于子列表的顶部。我用 z-index 试过了，但失败了。 child 总是与 parent 重叠。
我尝试这样做以使弹出窗口看起来像这样:
________ ________
|Link 1| |Link 2|______
|-> Sublink 1|
|-> Sublink 2|
|____________|
所以父项和子项之间没有可见的边界，但在它们周围有边界。
这是 HTML:
<html>
<head>
<style type="text/css">
a { color: #000; }
body { background: #444; }
#mainlist { list-style: none; }
#mainlist li
{
float: left;
margin-left: 10px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
padding: 10px;
background: #aaa;
display: inline;
}
#sublist
{
background: #aaa;
border: 1px solid black;
width: 100px;
display: none;
position: absolute;
list-style: none;
margin: 0px;
padding: 0px;
margin-left: -11px;
}
#sublist li
{
border: none;
background: #aaa;
width: 100%;
text-align: left;
}
#sublist li:hover { background: #ccc; }
#mainlist li:hover { z-index: 60; }
/* When mainlist li is hovered show the sublist */
#mainlist li:hover > #sublist
{
z-index: 50;
display: block;
}
</style>
</head>
<body>
<ul id="mainlist">
<li><a href="#">Testlink 1</a></li>
<li><a href="#">Testlink 2</a>
<ul id="sublist">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
</ul>
</body>
</html>
最佳答案
您可以通过稍微调整 CSS 来实现。当前您的最高级别<li>正在为您的主要元素设计样式。没有办法让这些出现在 #sublist 之上因为#sublist是它们的子元素(您不能将元素的子元素放在其父元素之后)。
解决方法是在 <a> 上应用顶级元素样式标签。这些是 #sublist 的 sibling 所以用 z-index 堆叠它们很容易:
作为一个简单的演示，将此规则添加到您的 CSS 中，您将看到 #sublist现在低于<a> :
#mainlist li a {
padding: 10px;
background: red;
position: relative;
z-index: 60;
}
您所要做的就是转移所有#mainlist li CSS 规则为 #mainlist li a .
关于HTML+CSS : List with submenu problems，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3677180/
24
4
0
我已经创建了一个用于创建菜单的 css3 样式表，在主菜单的子菜单中是正确的，但在创建子菜单之后。子菜单的子元素无法正常工作。 我想将子菜单的子菜单移动到父级的底部，我可以将鼠标光标移动到子级 JSF
我有一个面板菜单，里面有一些子菜单，其扩展属性由支持 bean 控制。问题是，不同子菜单的扩展状态似乎被浏览器缓存，这取决于用户上次访问该 url 时每个子菜单的先前状态，忽略设置为扩展的 bool
我对扩展名 mbmenu YII 有疑问。我正确设置了所有内容，现在有了默认主题。我想更改主题，因此进入 mbmenu.css 并更改我需要的内容，但页面上没有任何更改。当我直接从 Firefox 进
我的程序中有这个过滤功能。它采用下拉列表的形式。我目前正在使用 Select-Option 方法来显示下拉列表中的选项。但是，如果列表很长，它看起来不太好，所以我想做的是创建一个子菜单。例如，我有 2
我无法确定为什么我尝试实现的 JQuery 菜单的子菜单顶部有几行。当我运行演示并且使用相同的浏览器时，此问题不存在。我从这里下载了演示:http://apycom.com/menus/11-blac
我有一个带有我添加的箭头的菜单，我希望当用户将鼠标悬停到子菜单时必须保持显示，即使它通过空白处的光标，问题是我的类“.sub”必须是“位置: 绝对”，有什么想法吗？ 对不起我的英文XD .color
有没有可能制作一个可点击并相应地触发一个 Action ？ 这就是我的代码的样子，我也希望能够点击子菜单。
我在运行时添加了一个 SubMenu，一切正常。我只是有一个问题:如何在运行时添加的 SubMenu 上设置 showAsAction="always"？没有实现这一点的方法，如果不设置它，我找不到任
我有一个 css 菜单，我想应用一些 jquery 来扩展它的功能。特别是，当通过移动设备查看时，我希望它的父菜单被子菜单替换(意味着完全隐藏父菜单)并且适用于所有更深层次的菜单(就像在 ftp 客户
我正在尝试使用 mmenu jquery 插件从父链接打开子菜单，几乎成功了，但是一旦打开子菜单，该函数也会关闭菜单(主菜单从左侧打开)。 我明白了: Home
我正在学习 React JavaScript 库。我想创建一个具有以下布局的简单网络应用程序:菜单 + 子菜单 + 内容。我使用 react 15.0.2、react-router 2.4.0、bab
我正在尝试根据 google 中的规范设计我的抽屉导航样式.但是我无法获得这个红色标记的子菜单: 这是我当前的菜单结构。我通过将它分成一些组来得到分隔线，但我没有得到子菜单的标题。
? 的链接
如何添加链接到 用于 ？ 例如:
这是我的 menu.xml 文件。我需要在“i
我想用angularjs在指令中创建一个上下文菜单，我可以创建一个菜单但不能用子菜单创建。我的意思是，悬停时打开子菜单。 示例 fiddle :sample contextmenu 我的 Contro
我正在尝试构建一个带有子菜单弹出窗口的简单 HTML+CSS 菜单。 如果一个列表项有一个子列表并且被悬停，子列表就会出现。这已经有效了。 但我希望父元素位于子列表的顶部。我用 z-index 试过了
我想在 bootstrap 3.0 中悬停时显示子菜单。 遵循这行简单的代码对我很有效。 ul.nav li.dropdown:hover > ul.dropdown-menu { displ
我正在尝试使用在 csswizardry 上找到的 css 创建下拉菜单 出于某种原因，子菜单不会自动向左对齐，我似乎找不到问题所在。我认为这与 #nav li:hover ul{ left:0; }
我的 Android 应用程序有问题。该 Activity 有一个选项菜单。 菜单看起来像这样:
正如我在上一个问题中提到的那样，我在 Apple 的 JVM 中遇到了一些错误。我可以忍受第一个错误。但是第二个真的很烦人。如果我创建一个带有子菜单的 JMenu，并且我必须在运行时修改子菜单内容，我
我是一名优秀的程序员,十分优秀！