CODEWITHSUNDEEP
htmlcss
Etienne
Etienne

Reputation: 159

CSS: Drop Down menu disappear when I try to click on element from the displaying list

I have a problem with my dropdown menu, been looking everywhere but couldnt find an answer that work for me. The problem is that when i hover over the displaying menu, it disappears before i can even click on any elements. 

<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>

and here is the 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;
}

I tried a lot of things, giving a margin of 0 to avoid a "gap" where it would set back to display:none, make a bigger box for a more forgivable hovering zone... No result so far, the text always disappear before i can do anything.

Thanks for your help.

Upvotes: 2

Views: 2384

Answers (3)

waqar haider
waqar haider

Reputation: 83

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

this might help you batter there is an error in your css

Upvotes: 1

Andy Hoffman
Andy Hoffman

Reputation: 19109

This will allow you to hover on the submenu if you move your mouse carefully to the submenu.

/* 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;
}

enter image description here

https://jsfiddle.net/6wLevbt9/

Upvotes: 1

BLa
BLa

Reputation: 26

Turn on your inspect tool. You probably have to make the area you hover over bigger. When you are trying to select from your dropdown menu you are 'mouse-off'ing the hover area that shows the dropdown menu.

Upvotes: 1

Related Questions