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; 
}

我们为了使代码简短你省略了一些造型。（如阴影，边框样式和圆角） enter image description here

来源

2014-05-23 K.W.

您是会想抛出一个

clear: both

您UL UL李

来源

2014-05-23 15:20:53

这些项目的宽度不超过宽度集装箱。所以他们，作为内联元素，并没有清楚下一行。无论宽度如何设置都会使它们弹出到下一行。 –

另一个问题：它成功显示垂直菜单，每当我点击第二项（硬件清单/ 6789）时，它将显示另一个子菜单。（像Administration） –

就像附图所示，左边一个，当我悬停Task Overview时，它会显示第二个菜单。我认为，应该将菜单隐藏在背景中？ –

CSS3未分类列表，子菜单

回答

相关问题