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

Question

この問題に関するいくつかの議論があることは分かっていますが、いずれの解決策も私の問題を解決しませんでした。私が何をするにしても、私が使用しようとしているCSSのサブメニューは、あなたが親の上にホバーするのをやめた後に消えます。私はこれを引き起こしていた可能性がほとんどないとは思っていません。私はこれを永遠に見つめて解決策を見つけようとしています。私はトップに追加しようとしました：px;私はサブメニューのオプションを選択することができましたが、それはメニューを移動して親の上に表示されるようになりました。 。ヘッダーはそれをクリップすることができますかもしそうなら、私はそれを変更するために何を追加する必要がありますか？すべての援助は非常に高く評価されています！

.nav ul { 
 
    list-style: none; 
 
    background-color: #444; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav li { 
 
    font-size: 1.2em; 
 
    line-height: 40px; 
 
    text-align: left; 
 
    display: none; 
 
} 
 
.nav a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    padding-left: 15px; 
 
    transition: .3s background-color; 
 
} 
 
.nav a:hover { 
 
    background-color: #005f5f; 
 
} 
 
.nav a.active { 
 
    background-color: #aaa; 
 
    color: #444; 
 
    cursor: default; 
 
} 
 
/* Sub Menus */ 
 

 
.nav li li { 
 
    font-size: .8em; 
 
} 
 
@media screen and (min-width: 650px) { 
 
    .nav li { 
 
    width: 130px; 
 
    border-bottom: none; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 1.4em; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 
    .nav a { 
 
    border-bottom: none; 
 
    } 
 
    .nav > ul > li { 
 
    text-align: center; 
 
    } 
 
    .nav > ul > li > a { 
 
    padding-left: 0; 
 
    } 
 
    /* Sub Menus */ 
 
    .nav li ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
    } 
 
    .nav li:hover ul { 
 
    display: block; 
 
    } 
 
    .nav li ul li { 
 
    display: block; 
 
    } 
 
} 
 
#header { 
 
    float: left; 
 
    background-color: #ffffff; 
 
    cursor: default; 
 
    padding: 1.75em 2em 0em 0em; 
 
    position: relative; 
 
}

<header> 
 
    <img id="logo" src="images/logo.jpg" alt="logo"> 
 
    <div class="nav"> 
 
    <ul> 
 
     <li class="home"><a href="#">Home</a> 
 
     </li> 
 
     <li class="tutorials"><a href="#">Tutorials</a> 
 
     <ul> 
 
      <li><a href="#">Tutorial #1@@</a> 
 
      </li> 
 
      <li><a href="#">Tutorial #2</a> 
 
      </li> 
 
      <li><a href="#">Tutorial #3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="about"><a class="active" href="#">About</a> 
 
     </li> 
 
     <li class="news"><a href="#">Newsletter</a> 
 
     <ul> 
 
      <li><a href="#">News #1</a> 
 
      </li> 
 
      <li><a href="#">News #2@@@</a> 
 
      </li> 
 
      <li><a href="#">News #3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="contact"><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</header>

Answer 1

私は最終的にこれを理解しましたが、私は戻って来て、私の解決策を更新し、場合には、それは同様の問題を持っている誰にでも役に立つはずです思いました。それは実際には本当に簡単でした。

私はここでZインデックスを追加する必要がありました：

 .nav li:hover ul { 
      display: block; 
      z-index: 99999; 
     } 

これは、他のユーザーに推奨された、と私は最初にそれを試してみましたが、李に入れませんでした：ホバーので、それは動作しませんでした。高いz-インデックスがそれを一番上に向けるので、上にサブメニューを置くことによってクリッピングを引き起こしていたものはすべて停止しました。私はラインのどこかで誤ったものを読んで、間違ったセクションにZインデックスを置いていたに違いありません。ここの本当の解決策は、コードを慎重に読むことです。

Answer 2

すでに私が推測取り組んでいます。

あなた持っている唯一の hoverのサブメニューが表示ことを確認し、次のCSS：

$('.nav > ul > li').click(function(){ 

    $(this).find('ul').show(); 

}); 

：

.nav li:hover ul { 
    display: block; 
} 

が、私はそれをコメントアウトし、これを使用してクリックでサブメニューを表示したときにそれがどのように動作するかを参照してください。

私はこのことについてあなたの考えを教えてください。ありがとう！

$('.nav > ul > li').click(function(){ 
 
    
 
    $(this).find('ul').show(); 
 
    
 
});

.nav ul { 
 
    list-style: none; 
 
    background-color: #444; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav li { 
 
    font-size: 1.2em; 
 
    line-height: 40px; 
 
    text-align: left; 
 
    display: none; 
 
} 
 
.nav a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    padding-left: 15px; 
 
    transition: .3s background-color; 
 
} 
 
.nav a:hover { 
 
    background-color: #005f5f; 
 
} 
 
.nav a.active { 
 
    background-color: #aaa; 
 
    color: #444; 
 
    cursor: default; 
 
} 
 
/* Sub Menus */ 
 

 
.nav li li { 
 
    font-size: .8em; 
 
} 
 
@media screen and (min-width: 650px) { 
 
    .nav li { 
 
    width: 130px; 
 
    border-bottom: none; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 1.4em; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 
    .nav a { 
 
    border-bottom: none; 
 
    } 
 
    .nav > ul > li { 
 
    text-align: center; 
 
    } 
 
    .nav > ul > li > a { 
 
    padding-left: 0; 
 
    } 
 
    /* Sub Menus */ 
 
    .nav li ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
    } 
 
    /*.nav li:hover ul { 
 
    display: block; 
 
    }*/ 
 
    .nav li ul li { 
 
    display: block; 
 
    } 
 
} 
 
#header { 
 
    float: left; 
 
    background-color: #ffffff; 
 
    cursor: default; 
 
    padding: 1.75em 2em 0em 0em; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <img id="logo" src="images/logo.jpg" alt="logo"> 
 
    <div class="nav"> 
 
    <ul> 
 
     <li class="home"><a href="#">Home</a> 
 
     </li> 
 
     <li class="tutorials"><a href="#">Tutorials</a> 
 
     <ul> 
 
      <li><a href="#">Tutorial #1@@</a> 
 
      </li> 
 
      <li><a href="#">Tutorial #2</a> 
 
      </li> 
 
      <li><a href="#">Tutorial #3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="about"><a class="active" href="#">About</a> 
 
     </li> 
 
     <li class="news"><a href="#">Newsletter</a> 
 
     <ul> 
 
      <li><a href="#">News #1</a> 
 
      </li> 
 
      <li><a href="#">News #2@@@</a> 
 
      </li> 
 
      <li><a href="#">News #3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="contact"><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</header>