shareware,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.drop-menu {
display: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
let prev;
$(document).click(function(event) {
let li = $(event.target).closest(".dropdown-show");
if (li.length) {
let a = $(event.target).closest(".show-drop")
if (a.length) {
let menu = a.next();
if (prev && menu[0] !== prev) $(prev).fadeOut();
a.next().fadeToggle();
prev = menu[0]
}
} else if (prev) $(prev).fadeOut();
});
</script>
</head>
<body>
<li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="learn" href="#">Учебник <span class="icon-down-open-mini"></span></a>
<ul class="list-unstyled drop-menu" id="learn">
<li><a class="drop-item" href="#">Видео лекции и вебинары</a></li>
<li><a class="drop-item" href="#">Для чтения</a></li>
<li><a class="drop-item" href="#">Онлайн-поддержка</a></li>
</ul>
</li>
<li class="dropdown-show"><a class="main-menu-item show-drop" data-drop="update" href="#">Обновления <span class="icon-down-open-mini"></span></a>
<ul class="list-unstyled drop-menu" id="update">
<li><a class="drop-item" href="#">Системные</a></li>
<li><a class="drop-item" href="#">Обновление по модулям</a></li>
<li><a class="drop-item" href="#">Обновление по документам</a></li>
</ul>
</li>
</body>
</html>