CSS：表示リストから要素をクリックしようとするとドロップダウンメニューが表示されなくなる

Question

ドロップダウンメニューに問題があり、どこからでも見えていますが、私にとってうまくいく答えが見つかりませんでした。 問題は、表示メニューにカーソルを合わせると、要素がクリックされる前に消えてしまうことです。

<ul id="menu"> 

    <li><a href="#title">Home</a></li> 
    <li><a href="#part_1">Commandes de base --->></a> 
    <ul class="hidden"> 
     <li><a href="#ls">ls</a></li> 
     <li><a href="#cd">cd</a></li> 
     <li><a href="#mv">mv</a></li> 
     <li><a href="#cp">cp</a></li> 
     <li><a href="#mkdir">mkdir</a></li> 
     <li><a href="#cat">cat</a></li> 
     <li><a href="#find">find</a></li> 
     <li><a href="#grep"></a></li> 
    </ul> 
    </li> 

    <li><a href="#part_2">Commandes sytème --->></a> 
    <ul class="hidden"> 
     <li><a href="#top">top</a></li> 
     <li><a href="#chmod">chmod</a></li> 
     <li><a href="#du">du</a></li> 
     <li><a href="#reboot"></a></li> 
    </ul> 
    </li> 

</ul> 

、ここでCSSです：

/*Menu*/ 

#menu { 
    float: left; 
} 

ul { 
    list-style:none; 
    width: 150px; 
    display:inline-block; 
    border: 1px solid black; 
} 

#menu li { 
    /*border: 1px solid black;*/ 
    margin-bottom: 0px; 
} 

#menu li a:hover { 
    font-weight: bold; 
} 

.hidden { 
    margin-top: 0px; 
} 

/*Hide elements*/ 

#menu li ul li { 
    display: none; 
} 

/*Reveal elements on hover*/ 

#menu li a:hover + .hidden li, .hidden:hover { 
    display:block; 
} 

私はそれが戻ってディスプレイに設定します「ギャップ」を避けるために、0の余裕を与え、多くのことを試してみました：どれも、作るんより虚偽のホバリングゾーンのための大きなボックス...これまでの結果は、私は何もすることができます前に、テキストが常に消えます。

ありがとうございました。

Answer 1

マウスを慎重にサブメニューに移動すると、サブメニューを表示することができます。

/* I added 'li' to the end of second rule and used !important 
    to combat the style being overridden */ 

#menu li a:hover + .hidden li, .hidden:hover li { 
    display:block !important; 
} 

https://jsfiddle.net/6wLevbt9/

Answer 2

検査ツールをオンにします。おそらく、あなたが上に乗るエリアを大きくする必要があります。ドロップダウンメニューから選択しようとすると、ドロップダウンメニューが表示されているホバーエリアをマウスで「オフ」にします。

Answer 3

http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text

これは、あなたがあなたのCSSのエラー