CSS3未排序列表,子菜单

时间:2014-05-23 15:14:21

标签: html css3

Capture

请参阅捕获。正如您所看到的,第一个下拉菜单正常工作,子菜单确实显示,并且水平显示但不垂直列出。

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

1 个答案:

答案 0 :(得分:1)

你想要抛出一个

clear: both

你的ul ul li