我为下拉菜单编写了 CSS 代码
我的下拉菜单有问题::
当我将鼠标悬停在我的主菜单项（即示例中的第二个“bbbbb”）上时unity 下拉菜单子菜单3D角色，它会显示子菜单......好的......但它会通过增加它的高度出现在主菜单中，主菜单的背景也成为子菜单的背景，显然我不希望它以主菜单列表项中的大量文本开头-inedent，我不希望子菜单中的文本右对齐我想要的内容子菜单宽度不大于
我的 HTML::
我的 CSS::
.menu{
width:70%;
overflow:hidden;
background:green;
position:relative;
}
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;}
.menu ul li:hover ul li{ float:none;}
请解释我的错误
这是我的小提琴
最佳答案
您必须进行一些代码更改。
小提琴
css
.menu{
width:70%;
background:green;
position:relative;
}
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;
position: absolute; margin: -2px 0 0 0; z-index: 11110;}
.menu ul li:hover ul li{ float:none; height:20px; }
更新小提琴
变化：
显示：内联块；占据内容器的总宽度。
位置：相对；在菜单中使用它会导致外部容器的高度增加。
你可以在 w3school 阅读它
我们在 Stack Overflow 上发现了一个类似的问题unity 下拉菜单子菜单，关于悬停时出现在主菜单中的 html-css dropdowns::submenus：
