html hover ul,html - CSS: hide <ul> on hover - Stack Overflow-优快云博客

本文探讨了如何正确实现CSS下拉菜单的显示效果。作者尝试通过:hover伪类选择器来控制子菜单的可见性，但遇到了显示问题。文中包含了作者尝试的CSS代码片段，并提出了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

I would like that menu with class "bbb" occurs only when user hover on link in class "aaa" (as a drop-down menu...)

I use css and I created some code:

.aaa:hover .bbb {

opacity: 1;

}

.bbb {

opacity: 0;

}

But it doesn't work as intended. Can you help mi to get where i am wrong? I tried also do i with display:none & display:block instead of opacity.

Modification: resolution below doesn't work because i have other css metods. Pasted it:

.footer {

position: absolute;

right: 0;

bottom: 0;

left: 0;

padding: 1rem;

text-align: center;

font: inherit;

font-size: 10px;

color: white;

}

a, a:hover, a:active, a:visited {

color: white;

}

.buttons {

position: absolute;

text-align: center;

}

.set:not(:last-child) {

border-bottom: 1px dotted #aaa;

}

html, body, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

z-index: 1;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/* Default Styles

--------------------------------------------------------------------*/

body {

background: url('img/denim.png');

font-family: 'Droid Sans', sans-serif;;

}

.clearfix {

clear: both;

}

.wrap {

width: 940px;

margin: 4em auto;

}

nav {

background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));

border-radius: 6px;

box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);

padding: 0 10px;

position: relative;

}

.menu li {

float: left;

position: relative;

}

.menu li a {

color: #444;

display: block;

font-size: 14px;

line-height: 20px;

padding: 6px 12px;

margin: 8px 8px;

vertical-align: middle;

text-decoration: none;

}

.menu li a:hover {

background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));

border-radius: 12px;

box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);

color: #222;

}

/* Dropdown styles */

.menu ul {

position: absolute;

left: -9999px;

list-style: none;

opacity: 0;

transition: opacity 1s ease;

}

.menu ul li {

float: none;

}

.menu ul a {

white-space: nowrap;

}

/* Displays the dropdown on hover and moves back into position */

.menu li:hover ul {

background: rgba(255,255,255,0.7);

border-radius: 0 0 6px 6px;

box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);

left: 5px;

opacity: 1;

}

.aaa:hover .bbb {

display: block;

}

.bbb {

display: none;

}

/* Persistant Hover State */

.menu li:hover a {

background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));

border-radius: 12px;

box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);

color: #222;

}

.menu li:hover ul a {

background: none;

border-radius: 0;

box-shadow: none;

}

.menu li:hover ul li a:hover {

background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));

border-radius: 12px;

box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);

}