Q:

html & css dropdown menu

Хотел сделать меню на html&css чтобы на hover .button-menu список раскрывался
но как только уберешь курсор список заново исчезает.
<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>

На наведение .button-menu у списка .nav будет opacity:1; z-index:1;
но сразу после того как уберешь курсор от .button-menu список исчезает.

A:

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

Вот пример меню на jquery , конечно криво получилось но для примера подойдёт , двойное выпадающее меню

