Выпадающее меню исчезает, когда я пытаюсь его навестить

Я пытаюсь создать выпадающее меню 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: hover .sub-menu { дисплей: блок; 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), потому что вы не можете выбрать предыдущий элемент на основе текущего зависающего элемента (селектор ~ применяется к «следующему» элементу).

источник

2016-09-07 02:56:26 Dekel

Спасибо, брат! Я исправлю это. – MarksASP

Буду признателен, если ни один избиратель предоставит объяснение по поводу пониженного голосования – Dekel

Выпадающее меню исчезает, когда я пытаюсь его навестить

ответ

Смежные вопросы