gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:24:25 24 4
gpt4 key购买 nike

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

我省略了一些样式以使代码更适合您。 (如阴影、边框样式和圆 Angular ) enter image description here

最佳答案

你会想扔一个

clear: both

在你的 ul ul li 上

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

24 4 0