JustMeOnly,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: black;
}
.list {
border: 2px solid gray;
background: black;
width: 220px;
margin: 0 0 5px 0;
padding: 4px 20px;
}
.list:hover {
border: 2px solid white;
}
.sub {
display: none;
}
.link {
text-decoration: none;
color: gray;
}
.link:hover {
color: white;
}
ul,
li a {
list-style-type: none;
outline: none;
}
.cont {
border: 2px solid gray;
position: absolute;
height: 150px;
width: 300px;
left: 320px;
top: 16px;
color: gray;
text-align: center;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin: 20px 0 0 46px">
<a class="link" href="index.html">TO HOME</a>
</div>
<div id="menu">
<ul>
<li>
<ul class="list">
<li class="main">
<a href="#" class="link">
<div class="line">Раздел 1</div>
</a>
</li>
<li class="sub">
<ul>
<li>
<a href="page1.html" class="link">
<div>Ссылка 1</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="list">
<li class="main">
<a href="#" class="link">
<div class="line">Раздел 2</div>
</a>
</li>
<li class="sub">
<ul>
<li>
<a href="page2.html" class="link">
<div>Ссылка 2</div>
</a>
</li>
<li>
<a href="page3.html" class="link">
<div>Ссылка 3</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="cont"><br>
<span>Страница 1</span>
</div>
<script>
let link = 'page2.html' //window.location.href
$(document).ready(function() {
$('li.main a').click(function(e) {
var dropDown = $(this).parent().next();
$('.sub').not(dropDown).slideUp(240);
dropDown.slideToggle(240);
e.preventDefault();
});
$('.sub a').filter(function() {
return link.endsWith(this.getAttribute('href'))
}).parents('.sub').slideDown(240);
});
</script>
</body>
</html>