CSS:隐藏< ul>悬停时 [英] CSS: hide <ul> on hover

问题描述

我希望只有当用户将鼠标悬停在类"aaa"中的链接上时，才会出现类"bbb"的菜单(作为下拉菜单...)

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

我使用CSS并创建了一些代码:

I use css and I created some code:

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

.bbb {
  opacity: 0;
}

但是它没有按预期工作.您能帮我弄错我吗?我也尝试使用display:none& display:block而不是不透明.

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.

修改:下面的分辨率不起作用，因为我还有其他的css方法.粘贴:

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>

推荐答案

在ul的.bbb上应用类，而不是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)，后者是类.aaa的直接子代，并使用display:none和如图所示，它应该可以正常工作.在给定类.ccc和底层嵌套ul作为.ddd的情况下，对"newIB"父级下拉容器应用相同的条件.

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>

修改:这样下拉菜单不会像Vxp所指出的那样消失.

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

这篇关于CSS:隐藏< ul>悬停时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！