CSS: hide on hover

问题:

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));
  background-image: linear-gradient(#fff, #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));
  background-image: linear-gradient(#ededed, #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));
  background-image: linear-gradient(#ccc, #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));
  background-image: linear-gradient(#ededed, #fff);
  border-radius: 12px;
  box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}

<div class="wrap">
  <nav>
    <ul class="menu">
      <li><a href="#"><span class="iconic home"></span> Home</a></li>
      <li><a href="#"><span class="iconic magnifying-glass"></span> newIB</a>
        <ul>
          <li><a href="#">111</a></li>
          <li><a href="#">222</a></li>
          <li><a href="#">333</a></li>
          <li><a href="#">444</a></li>
          <li class="aaa"><a href="www.example.pl">555</a>
            <ul class="bbb">
              <li><a href="https://www.example.pl">test</a></li>
              <li><a href="https://www.example.pl">test</a></li>
              <li><a href="https://www.example.pl">test</a></li>
              <li><a href="https://www.example.pl">test</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

回答1:

Apply the class on .bbb on ul instead of li (this is because you're trying to make a drop down and display the entire unordered-list instead of just one of the nested li) which is a direct child of class .aaa and use display:none and display:block as shown and it should work fine. The same criteria is applied on the "newIB" parent dropdown container given the class .ccc and the underlying nested ul as .ddd.

.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));
    background-image: linear-gradient(#fff, #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));
    background-image: linear-gradient(#ededed, #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;
    list-style: 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);
}

.aaa:hover .bbb {
  display: block;
}

.bbb {
  display: none;
}

.ccc:hover .ddd {
  display: block;
}

.ddd {
  display: none;
}

/* Persistant Hover State */

.menu li:hover a {
    background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
    background-image: linear-gradient(#ccc, #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));
    background-image: linear-gradient(#ededed, #fff);
    border-radius: 12px;
    box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}

<div class="wrap">

  <nav>
    <ul class="menu">
      <li><a href="#"><span class="iconic home"></span> Home</a></li>
      <li class="ccc"><a href="#"><span class="iconic magnifying-glass"></span> newIB</a>
        <ul class="ddd">
          <li><a href="#">111</a></li>
          <li><a href="#">222</a></li>
          <li><a href="#">333</a></li>
          <li><a href="#">444</a></li>
          <li class="aaa"><a href="www.example.pl">555</a>
            <ul class="bbb">
              <li><a href="https://www.example.pl">test</a></li>
              <li><a href="https://www.example.pl">test</a></li>
              <li><a href="https://www.example.pl">test</a></li>
              <li><a href="https://www.example.pl">test</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

Modification: So that the drop-down doesn't disappear as pointed out by Vxp.

回答2:

You have to nest the ul with the .bbb li inside the .aaa li:

.bbb {
  opacity: 0;
}

.aaa:hover .bbb {
  opacity: 1;
}

<nav>
  <ul class="menu">
    <li><a href="#"><span class="iconic home"></span> Home</a></li>
    <li><a href="https://system.aliorbank.pl/sign-in"><span class="iconic magnifying-glass"></span> newIB</a>
      <ul>
        <li><a href="#">111</a></li>
        <li><a href="#">222</a></li>
        <li><a href="#">333</a></li>
        <li><a href="#">444</a></li>
        <li class="aaa"><a href="www.example.pl">555</a>
          <ul>
            <li class="bbb"><a href ="https://www.example.pl">test</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>