下拉菜單消失時，我試圖將其懸停

我試圖建立一個下拉菜單CON HTML和CSS，但問題是，當我將鼠標懸停在包含子菜單的菜單項上，這一個出現，但是當我試圖徘徊它，它消失了。下拉菜單消失時，我試圖將其懸停

下面的代碼

* { 
 
    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>

來源

2016-09-07 MarksASP

忘記了，你可以在這裏看到這裏的網站 http://codepen.io/MarcoASP/pen/VKLwJG – MarksASP

你的背景和顏色都是白色的...這是問題嗎？ – kukkuz

爲什麼不把鼠標懸停在.nav-item上並顯示.submenu？ .nav-item：懸停.sub-菜單{ display：block; z-index：9999; } –

您的問題是，一旦你從.nav-item a移動鼠標到.sub-menu，該.nav-item a不徘徊所以這個選擇.nav-item a:hover ~ .sub-menu無效。

你可以解決這個問題：

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

這裏是一個codepen：
http://codepen.io/anon/pen/xEGbYa

這將確保當你懸停它爲好.sub-menu會留塊。

現在的問題是，你有一個新的問題 - 一旦你將你的鼠標從頂層菜單（.nav-item a）移動到子菜單（.sub-menu） - 你的頂層菜單不再與正確的背景。
要解決此問題，您將需要更改您的html結構（或使用javascript），因爲您無法選擇基於當前懸停元素的上一個元素（~選擇器應用於「next」元素）。

來源

2016-09-07 02:56:26 Dekel

謝謝兄弟！我會解決它。 – MarksASP

如果下來的選民會對投票做出解釋，我將不勝感激 – Dekel

下拉菜單消失時，我試圖將其懸停

回答

相關問題