html - 将鼠标悬停在 <li> 上使其他 <ul> 消失

Question

我正在尝试以下操作: 当我将鼠标悬停在任何其他菜单项上时，事件子菜单必须消失。例如，当我悬停“Kalender”时，我希望“bannen”的子菜单消失(显示:无，我怀疑)。但是我如何在 CSS 中做到这一点，或者这是不可能的？

<div class="centreer">
 <div class="menu_b">
  <div class="logo"></div>
   <ul class="menu_tekst">
    <li class="titel_blok"><a class="link_titel" href="faq.php">Faq</a></li>
    <li class="tussenstuk"></li>
    <li class="titel_blok"><a class="link_titel" href="contact.php">Contact</a></li>
    <li class="tussenstuk"></li>
    <li class="titel_blok media">
     <a class="link_titel" href="media.php">Media</a>
     <ul class="sub_media sub">
      <li><a class="link_titel" href="media/formulieren.php">Formulieren</a></li>
      <li><a class="link_titel" href="media/bestanden.php">Bestanden</a></li>
      <li><a class="link_titel" href="media/fotos.php">Foto's</a></li>
     </ul>
    </li>
    <li class="tussenstuk"></li>
    <li class="titel_blok">
     <a class="link_titel" href="kalender.php">Kalender</a>
    </li>
    <li class="tussenstuk"></li>
    <li class="titel_blok bannen actief">
     <a class="link_titel actief" href="bannen.php">Bannen</a>
     <ul class="sub_bannen sub">
      <li><a class="link_titel actief_sub_a" href="bannen/plusachtien.php">+18</a></li>
      <li><a class="link_titel" href="bannen/pluszestien.php">+16</a></li>
      <li><a class="link_titel" href="bannen/sjo.php">Sjo</a></li>
      <li><a class="link_titel" href="bannen/knim.php">Knim</a></li>
      <li><a class="link_titel" href="bannen/joros.php">Joro's</a></li>
      <li><a class="link_titel" href="bannen/grovers.php">Grovers</a></li>
      <li><a class="link_titel" href="bannen/piepers.php">Piepers</a></li>
     </ul>
    </li>
    <li class="tussenstuk"></li>
    <li class="titel_blok"><a class="link_titel" href="info.php">Info</a></li>
    <li class="tussenstuk"></li>
    <li class="titel_blok"><a class="link_titel" href="index.php">Home</a></li>
   </ul>
  </div>
  <div class="onder_menu"></div>
  <div class="sub_menu"></div>

还有CSS

.centreer {
    width:1000px;
    margin: 0 auto;
    position: relative;
    height:auto;
}
.tekst {
    padding:0px 0px 10px 0px;
}
ul, li {
    list-style:none;
    float: right;
}
.menu_tekst li {
    font-family:Verdana, Geneva, sans-serif;
    font-size:17px;
    text-transform:uppercase;
}
.onder_menu {
    height:52px;
}
.link_titel {
    text-decoration:none;
    padding:15px 10px 16px 10px;
    color:#000;
    background-color:none;
}
.actief {
    background-color:#0F0;
}
.menu_tekst li:hover >a.link_titel {
    color:#F00;
    background-color:#0F0;
}
ul.sub_media .link_titel, ul.sub_bannen .link_titel {
    text-decoration:none;
    padding:16px 10px 16px 10px;
    color:#000;
    background-color:#0F0;
}
ul.sub_media .link_titel:hover, ul.sub_bannen .link_titel:hover {
    color:#F00;
}
.tussenstuk {
    background-color:none;
    height:30px;
    width:5px;
}
.logo {
    position:absolute;
}
.sub_menu {
    height:52px;
    background-color:#0F0;
}
/*sub menu*/
 .menu_tekst ul.sub_bannen {
    width:1000px;
    margin:32px 0 0 0;
    left:-173px;
    padding:0;
    position: absolute;
    float:left;
    display:none;
}
.menu_tekst ul.sub_media {
    width:1000px;
    margin:32px 0 0 0;
    left:0px;
    padding:0;
    position: absolute;
    float:left;
    display:none;
}
li.bannen:hover > ul.sub_bannen {
    display:block !important;
}
li.media:hover > ul.sub_media {
    display:block !important;
}
li.bannen.actief > ul {
    display:block;
}

我已经制作了它的 jsFiddle:http://jsfiddle.net/Rings/vasc9/1/

谢谢!

Answer 1

这是您要实现的目标吗:edited JSFiddle ？

.titel_blok:hover > .sub {
    display:block;
}
.menu_tekst > .actief > .sub {
    display:block;
}
.menu_tekst:hover > .actief > .sub {
    display:none;
}
.menu_tekst:hover > .actief:hover > .sub {
    display:block;
}