html - CSS3未排序列表，子菜单

请查看捕获。如您所见，第一个下拉菜单正常工作，该子菜单确实出现了，并且以水平显示，但没有垂直列出。

CSS代码：

#topbanner    {
width:100%; height:25px; margin:0;position:relative;background-color:#4c4e5a;display: block;}

.rightmenu, .rightmenu ul, .rightmenu li, .rightmenu a { margin: 0; padding: 0; border: none; outline: none; }

.rightmenu { float: right; }
.rightmenu li a{
display: block; padding: 0 14px; margin: 3px 0;color: #f3f3f3;background-color: #4c4e5a;}

.rightmenu ul {
    position: absolute;
opacity: 0;
background-color: #4c4e5a;
left: auto;
right:0;
width:180px;
}

.rightmenu ul ul {
position: absolute;
opacity: 0;
right: 100%;
top: 0%;
background-color: #4c4e5a;
width:180px;
}

.rightmenu li:hover > a { color: #8fde62; }
.rightmenu li:hover > ul { opacity: 1; }

.rightmenu ul li{
height:0;
overflow:hidden;
padding: 0;
}

.rightmenu li:hover > ul li {
height: 25px;
overflow: visible;
padding:0;
}

.rightmenu ul li a {
white-space: nowrap;
border: none;
}

为了使代码简短，我省略了一些样式。 （例如阴影，边框样式和圆角）

最佳答案

你想扔一个

clear: both

在你的ul ul上

关于html - CSS3未排序列表，子菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23832843/