ホバーでドロップダウンメニューが消える

Question

私が上に移動するとすぐに消えるドロップダウンメニューに問題があります。私はこの問題について何か助けていただければ幸いです。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.clearfix:after { 
 
    clear: both; 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    visibility: hidden; 
 
} 
 

 
/* Menu */ 
 
header>hide:before { 
 
    display: block; 
 
    content: ""; 
 
    height: 30px; 
 
    width: 30px; 
 
    background: black url(burger.gif) no-repeat 0 0; 
 
    background-size: contain; 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 0px; 
 
    margin: 0px; 
 
} 
 

 
header>nav { 
 
    display: none; 
 
    position: absolute; 
 
    text-align: left; 
 
    top: 50px; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 193px; 
 
    background-color: rgba(0,0,0,0.5); 
 
    z-index: 999; 
 
} 
 

 
header>nav>ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header>nav>ul>li { 
 
    position: relative; 
 
    float: none; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: url(menu.png) no-repeat top right; 
 
    background-size: contain; 
 
} 
 

 
header>nav>ul>li>a { 
 
    font-size: 1em; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: white; 
 
    margin: 0px 59px 0px 0px; 
 
    display: inline-block; 
 
    line-height: 48px; 
 
    padding: 0px 24px; 
 
    width: 60%; 
 
    white-space: nowrap; 
 
} 
 

 
header>nav>ul>li>a:hover { 
 
    background-color: rgb(146, 0, 0); 
 
} 
 

 
header>hide:hover + nav { 
 
    display: block; 
 
}

<!-- Header --> 
 
<header class="clearfix"> 
 
<!-- Menu --> 
 
<hide></hide> 
 
<nav> 
 
    <ul> 
 
    <li> 
 
     <a href="#">123456</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">123456</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">123456</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">123456</a> 
 
    </li> 
 
    </ul> 
 
</nav>

JSFiddle.

Answer 1

あなたがリンク項目上にカーソルを移動しようとして隠れてからメニューを防ぐために、あなたは:hoverと1つの以上のCSSルールを追加する必要があるときにメニューが表示されるようになり、そのあなたはリンクの1つに乗っています。

これは、以下のCSS追加することによって行うことができます。

header>hide:hover + nav, 
header>nav:hover { 
     display: block; 
} 

は、私が追加したheader>nav:hoverに注意してください。これにより、あなたが上に置かれたときにnav要素が表示されるようになります。

更新されたフィドルへのリンク：http://jsfiddle.net/gmeayqLy/1/