1

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>

7
  • Please update your HTML as well and the previous css for the hover part.
    – user7207170
    Dec 8, 2017 at 8:52
  • you're right. Done it.
    – ti01878
    Dec 8, 2017 at 9:04
  • I think I got to the source of the problem, sec.
    – user7207170
    Dec 8, 2017 at 9:11
  • Updated your code, check it out. The problem was with the overlapping styles of opacity:0 and 1 which you still had on the parent dropdown which was being applied on the underlying dropdown as well. I just applied the same display and block CSS styles for your "newIB" li tag ,removed the opacity CSS styles and it works like a charm.
    – user7207170
    Dec 8, 2017 at 9:16
  • A couple of other things also needed to be fixed like the absolute positioning of your ul which was set to left:-9999px and so on. Check out the modified CSS and update it accordingly to your needs.
    – user7207170
    Dec 8, 2017 at 9:24

2 Answers 2

4

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.

7
  • @ti01878 No problem, don't forget to mark it or rate it up if it helped. Cheers
    – user7207170
    Dec 8, 2017 at 8:11
  • It will because the CSS is applied to only the parent selector and while it is hovered and that was what the questioner asked but to change that, we can add the hover on a div container instead and it would work fine.
    – user7207170
    Dec 8, 2017 at 8:14
  • 1
    The OP did say that they tried to use it but it didnt work, and display:none and block is a better alternative to setting opacity when displaying a drop-down menu.
    – user7207170
    Dec 8, 2017 at 8:19
  • well, there is another problem :): <li><a href="example.pl">test</a></li> is visible only if i hover on class="aaa", and user is not able to click on it (it disappear when he tries to hover on it)...
    – ti01878
    Dec 8, 2017 at 8:22
  • 1
    @ti01878 I already modified it, check it out it works fine now. The problem with you intial code was the ul class .bbb wasn't enclosed in the class .aaa li. As you can it is now : <li class="aaa"><a href="www.example.pl">555</a> <ul class="bbb"> <li><a href=example.pl>test</a></li> </ul></li>
    – user7207170
    Dec 8, 2017 at 8:24
1

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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.