Dropdown-Menü verschwindet, wenn ich versuche, es zu schweben

Ich versuche, ein Dropdown-Menü mit HTML und CSS zu erstellen, aber das Problem ist, dass wenn ich den Menüeintrag, der das Untermenü enthält, schwebt, aber wenn Ich versuche es zu schweben, es verschwindet.Dropdown-Menü verschwindet, wenn ich versuche, es zu schweben

Hier ist der Code

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 100%; 
 
} 
 
header { 
 
    height: 120px; 
 
    background: #353638; 
 
    width: 100%; 
 
    z-index: 1; 
 
} 
 
#c-header { 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
} 
 
#logo { 
 
    float: left; 
 
    width: 76px; 
 
    height: 35px; 
 
    margin: 40px; 
 
} 
 
#logo img { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
nav { 
 
    float: right; 
 
    margin: 15px; 
 
    line-height: 70px; 
 
} 
 
.nav-item { 
 
    list-style-type: none; 
 
    float: left; 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: bold; 
 
    height: 90px; 
 
    display: block; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.nav-item > a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
    height: 100%; 
 
    line-height: 90px; 
 
    padding: 0 15px 0 15px; 
 
    transition: background .5s ease; 
 
} 
 
.nav-item a:hover { 
 
    background: #337ab7; 
 
} 
 
.nav-item .sub-menu { 
 
    background: #337ab7; 
 
    position: absolute; 
 
    width: 250px; 
 
    display: none; 
 
    z-index: 9999; 
 
} 
 
.sub-menu ul { 
 
    overflow: hidden; 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 
.sub-menu-item { 
 
    height: 40px; 
 
} 
 
.sub-menu-item a { 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
    line-height: 32px; 
 
    padding: 4px 0 4px 20px; 
 
    transition: background .3s ease; 
 
} 
 
.sub-menu-item a:hover { 
 
    background: #333; 
 
} 
 
.nav-item a:hover ~ .sub-menu { 
 
    display: block; 
 
    z-index: 9999; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
    <title>Sima</title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <link rel="stylesheet" href="css/font-awesome/css/font-awesome.css"> 
 
    <script src="js/jquery-3.1.0.min.js"></script> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <div id="c-header"> 
 
     <a href="#" id="logo"> 
 
     <img src="img/logo.png" alt="sima_logo"> 
 
     </a> 
 
     <nav id="menu"> 
 
     <ul> 
 
      <li class="nav-item"> 
 
      <a href="#">Home</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#" id="oap">Our Another Page 
 
       <i class="fa fa-angle-down" aria-hidden="true"></i> 
 
       </a> 
 

 
      <div class="sub-menu"> 
 

 
       <ul id="oap-sub-menu"> 
 
       <li class="sub-menu-item"><a href="#">Our Team</a> 
 
       </li> 
 
       <li class="sub-menu-item"><a href="#">Our Testimonial</a> 
 
       </li> 
 
       <li class="sub-menu-item"><a href="#">Our Latest Blog</a> 
 
       </li> 
 
       <li class="sub-menu-item"><a href="#">Our Pricing</a> 
 
       </li> 
 
       <li class="sub-menu-item"><a href="#">Our Happy Client</a> 
 
       </li> 
 
       </ul> 
 

 
      </div> 
 

 

 

 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#" id="sp">Stick Page 
 
       <i class="fa fa-angle-down"></i> 
 

 
       </a> 
 

 
      <div class="sub-menu"> 
 

 
       <ul id="sp-sub-menu"> 
 
       <li class="sub-menu-item"><a href="#">Blog Page</a> 
 
       </li> 
 
       <li class="sub-menu-item"><a href="#">Single Blog Page</a> 
 
       </li> 
 
       </ul> 
 

 
      </div> 
 

 

 

 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#">About</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#">Our Skill</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#">Our Service</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#">Our Portfolio</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a href="#">Contact Us</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </header> 
 

 
    <script src="js/script.js"></script> 
 
</body> 
 

 
</html>

Quelle

2016-09-07 MarksASP

Forgot, Sie können die Website hier sehen http://codepen.io/MarcoASP/pen/VKLwJG – MarksASP

Ihr Hintergrund und Farbe sind beide weiß ... das ist das Problem? – kukkuz

Warum schweben Sie nicht .nav-item und show .submenu? .nav-Artikel: Hover .sub-Menü { Anzeige: Block; Z-Index: 9999; } –

Sie Problem ist, dass, wenn Sie Ihre Maus von .nav-item a zum .sub-menu bewegen, die .nav-item a nicht ist schwebte so diese select .nav-item a:hover ~ .sub-menu nicht gültig ist.

Sie können dieses Problem beheben, indem:

.nav-item a:hover ~ .sub-menu, .sub-menu:hover { 
    display: block; 
    z-index: 9999; 
}

ist hier ein codepen:
http://codepen.io/anon/pen/xEGbYa

Dies wird der .sub-menu stellen Sie sicher, Block bleiben, während Sie es auch schweben.

Das Problem ist jetzt, dass Sie ein neues Problem bekommen - sobald Sie Ihre Maus aus dem Hauptmenü (.nav-Element a) in das Untermenü (.sub-Menü) bewegen - Ihr Top-Menü ist nicht mehr mit der korrekter Hintergrund
Um dies zu beheben, müssen Sie Ihre HTML-Struktur ändern (oder JavaScript verwenden), weil Sie das vorherige Element basierend auf dem aktuellen Element hovered nicht auswählen können (der ~ Selektor wird auf das Element "next" angewendet).

Quelle

2016-09-07 02:56:26 Dekel

Danke, Bruder! Ich werde es reparieren. – MarksASP

Ich werde es zu schätzen wissen, wenn der Down-Wähler eine Erklärung über die Down-Abstimmung geben wird – Dekel

Dropdown-Menü verschwindet, wenn ich versuche, es zu schweben

Antwort

Verwandte Themen