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