Could you assist me in achieving a similar effect as demonstrated below:
I have two menus (http://osiyo-nur.uz/osiyo-nur.uz/test6/), one of which is initially invisible. When I hover over the first menu, the second menu becomes visible with an overlay effect on the background. Instead of traditional menus, I am using buttons for this purpose. I attempted to use a condition but it did not yield the desired result. Your help in resolving this would be greatly appreciated.
$(document).ready(function() {
if ($(".none").css('display') == 'block') {
$("#overlay").css('display', 'block');
} else {
$("#overlay").css('display', 'none');
}
});.none {
display: none;
width: 60%;
background: red;
color: #fff;
text-align: center;
}
.block {
display: block;
width: 60%;
text-align: center;
background: red;
color: #fff;
margin-bottom: 5rem;
}
.block:hover+.none {
display: block;
}
.block:hover .overlay {
display: block;
}
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 999;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
background-color: rgba(0, 0, 0, 0.6);
overflow-x: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GoodGross</title>
<link href="css\style.css" rel="stylesheet">
</head>
<body>
<div>
<!-- HEADER PART STARTS -->
<div class="main_content">
<div class="test">
<a class="btn btn-danger block">Block</a>
<a class="btn btn-danger none">None</a>
</div>
</div>
<div class="overlay" id="overlay"></div>
<div class="clear"></div>
</div>
</body>
</html>