Необходимо,чтобы меню закрывалось при клике вне его и вне кнопки, при помощи которой вызвалось это меню. Нужно использовать JQuery.
function hideMenu1() {
$('.menu_dropdown1').slideUp(700);
}
function showMenu1() {
$('.menu_dropdown1').slideDown(700);
}
$(document).ready(function() {
$(".menu_element1").on("mouseover", showMenu1);
$("#dr1").on("mouseover", showMenu1);
$(".menu_dropdown1").on(" mouseleave", hideMenu1);
$(".menu_element2").on("mouseover", showMenu2);
$("#dr2").on("mouseover", showMenu2);
$(".menu_dropdown2").on(" mouseleave", hideMenu2);
$(".menu_element3").on("mouseover", showMenu3);
$("#dr3").on("mouseover", showMenu3);
$(".menu_dropdown3").on(" mouseleave", hideMenu3);
$(".menu_element4").on("mouseover", showMenu4);
$("#dr4").on("mouseover", showMenu4);
$(".menu_dropdown4").on(" mouseleave", hideMenu4);
});
function hideMenu2() {
$('.menu_dropdown2').slideUp(700);
}
function showMenu2() {
$('.menu_dropdown2').slideDown(700);
}
function hideMenu3() {
$('.menu_dropdown3').slideUp(700);
}
function showMenu3() {
$('.menu_dropdown3').slideDown(700);
}
function hideMenu4() {
$('.menu_dropdown4').slideUp(700);
}
function showMenu4() {
$('.menu_dropdown4').slideDown(700);
}
a{
text-decoration: none;
}
body{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: -2px;
background-color:#DCD8CF;
}
.header{
display: flex;
/*padding-top: 40px;*/
background-color: #282827;
height: 100px;
}
.menu_list{
margin-top: 0px;
display: flex;
list-style: none;
margin-left: 25px;
}
.menu_element1,.menu_element2,.menu_element3,.menu_element4{
justify-content: center;
align-items: center;
display: flex;
width: 140px;
height: 100px;
margin-left: 100px;
border-left: 3px solid #E25D33;
border-right: 3px solid #E25D33;
}
.menu_element1:hover,.menu_element2:hover,.menu_element3:hover,.menu_element4:hover{
border-left: 3px solid #E25D33;
border-right: 3px solid #E25D33;
background-color: #E25D33;
color: #282827;
transition: 0.4s;
position: relative;
}
#menu_element1:hover,#menu_element2:hover,#menu_element3:hover,#menu_element4:hover a{
color: #282827;
transition: 0.4s;
}
#menu_element1,#menu_element2,#menu_element3,#menu_element4 a{
color: #E25D33;
}
.logo{
margin-top: 20px;
margin-left: 80px;
}
.icon-phonegap-seeklogocom, .logo{
font-size: 50px;
height: 20px;
color: #E25D33;
width: 20px;
}
/*DROPED MENU*/
.menu_element1,.menu_element2,.menu_element3,.menu_element4 {
width: 200px;
position: relative;
}
.menu_dropdown1,.menu_dropdown2,.menu_dropdown3,.menu_dropdown4 {
display: none;
width: 300px;
position: absolute;
margin-top: 60px;
border-bottom: 2px solid gold;
border-top: 2px solid gold;
border-left: 2px solid #ADA2F6;
border-right: 2px solid #ADA2F6;
padding: 20px;
background-color: white;
border-radius: 10px;
}
#dr1,#dr2,#dr3,#dr4 {
position: relative;
z-index: 2;
display: block;
margin: 0 auto;
padding: 0 5px;
height: 30px;
line-height: 30px;
width: 60px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="menu">
<ul class="menu_list">
<li class="menu_element1" ><a id="dr1" href="">Winter</a></li><div class="menu_dropdown1">
<p>Games</p>
<p>Programs</p>
<p>Soft</p>
<p>Sale</p>
</div>
<li class="menu_element2"><a id="dr2" href="">Spring</a><div class="menu_dropdown2">
<p>Games</p>
<p>Programs</p>
<p>Soft</p>
<p>Sale</p>
</div></li>
<li class="menu_element3" ><a id="dr3" href="">Summer</a><div class="menu_dropdown3">
<p>Games</p>
<p>Programs</p>
<p>Soft</p>
<p>Sale</p>
</div></li>
<li class="menu_element4"><a id="dr4" href="">Autumn</a><div class="menu_dropdown4">
<p>Games</p>
<p>Programs</p>
<p>Soft</p>
<p>Sale</p>
</div></li>
</ul>
</div>
</div>