html ' s dropdown menu

[Mystic]

I wanted to make a menu for html constituentss to hover .button-menu List disclosed But as soon as you remove the cadet, 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>

Introduction .button-menu List .nav I'll be there. opacity:1; z-index:1;But right after you remove the cadet .button-menu The list is missing.

[terrea]

 $(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's an example of the menu on jquery, of course, but for example, it'll be a two-way menu.