I wanted to make a menu on html & css so that the list would open on hover .button-menu , but as soon as you remove the cursor, the list disappears again.

 <div class="nav-wp"> <div class="button-menu">Menu</div> <ul class="nav"> <li><a href="#">about</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">services</a></li> <li><a href="#">contact</a></li> </ul> </div>

On targeting .button-menu , the .nav list will have an opacity:1; z-index:1; opacity:1; z-index:1; but immediately after you remove the cursor from the .button-menu list disappears.

  • Why not use jquery? there it will all work as it should - user33274
  • Shove a .nav into a div and then it will work on a simple css. - Vladimir
  • Use the checkbox and label like this: www.stackoverflow.com/a/449151/178988 - Qwertiy ♦

2 answers 2

  $(document).ready(function() { $(".jq").click(function() { $(".drop").hide(); $(".jq").hide(); }); $(".li_menu").click(function() { $(".drop").show(); $(".jq").show(); }); }); $(document).ready(function() { $(".jq").click(function() { $(".drop_2").hide(); $(".jq").hide(); }); $(".li_menu_2").click(function() { $(".drop_2").show(); $(".jq").show(); }); }); 
  ul, a { list-style-type: none; text-decoration: none; } menu>ul { position: relative; width: 200px; background: #ccc; } li { display: block; height: 30px; line-height: 30px; } menu ul>li>ul { width: 250px; position: absolute; top: 0px; left: 220px; background: #c01; display: none; z-index: 10; } menu ul li>ul:after { content: ''; border: 8px solid transparent; border-right: 8px solid #c01; position: absolute; left: -15px; top: 13px; } .li_menu { position: relative; } .li_menu:before { content: ''; border: 8px solid transparent; border-left: 8px solid #fafafa; position: absolute; right: -5px; top: 40%; } menu ul>li>ul>li { width: 90%; text-align: center; } a { cursor: pointer; color: #fafafa; } a:hover { text-decoration: underline; } .jq { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 8; background: transparent; } .drop_2 { display: none; background: lightblue; position: absolute; left: 270px; z-index: 9; } .drop_2:after { content: ''; border: 8px solid transparent; border-right: 8px solid lightblue; position: absolute; left: -15px; top: 10px; } .li_menu_2 { position: relative; } .li_menu_2:before { content: ''; border: 8px solid transparent; border-left: 8px solid #fafafa; position: absolute; right: -27px; top: 30%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <menu> <ul> <li><a href="">Главная</a> </li> <li><a href="">Гостевая</a> </li> <li class="li_menu"><a>Уроки</a> <ul class="drop"> <li><a href="">Живопись</a> </li> <li class="li_menu_2"><a>Фотошоп</a> <ul class="drop_2"> <li><a href="">Уроки</a> </li> <li><a href="">Основы</a> </li> <li><a href="">Функиции</a> </li> <li><a href="">Продвинутые</a> </li> </ul> </li> <li><a href="">Корел Драв</a> </li> <li><a href="">Верстка</a> </li> <li><a href="">Моё превью</a> </li> </ul> </li> <li><a href="">О нас</a> </li> </ul> </menu> <div class="jq"></div>

Here is an example of a menu on jquery, of course it turned out crookedly, but for an example it fits, a double drop-down menu

  • Thank! But I don't know jquery so well. - werfghjkml

Try to make .nav child .button-menu, element .button-menu, then the list will not collapse while the cursor is over it.