function fileStream($input, $output){
$file1 = fopen( $input, "r" );
$file2 = fopen( $output, "w");
stream_copy_to_stream($file1, $file2);
fclose($file1);
fclose($file2);
}<div class="dropbox active_dropbox">
<ul class="nav_twolvl">
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
</ul>
</div><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<style>
body * {
box-sizing: border-box;
}
.nav {
width: 200px;
height: 100vh;
background: antiquewhite;
}
.nav_list {
padding: 0;
}
.nav_list li {
list-style: none;
position: relative;
background: antiquewhite;
border-bottom: 1px #333 solid;
}
.nav_list li a {
}
.nav_block_link {
display: flex;
font-size: 20px;
padding: 12px;
}
.nav_list li:hover {
background: aliceblue;
}
.dropbox {
position: absolute;
height: 100vh;
width: 0;
background-color: #cccccc;
opacity: 0;
overflow-x: hidden;
border-radius: 30px;
transition: .5s;
transform: translateX(-27vw);
left: 0;
transition: opacity 0.3s cubic-bezier(.66,.74,.58,.92) .1s;
top: 0;
}
.active_dropbox {
width: 26.5vw;
opacity: 1;
transform: translateX(0);
display: block !important;
left: 100%;
}
.nav_twolvl {
padding: 0;
}
.nav_twolvl li {
}
.nav_twolvl li a {
display: flex;
font-size: 20px;
padding: 12px 12px 13px;
}
</style>
</head>
<body class="bg-light">
<main>
<!--content-->
<nav class="nav">
<ul class="nav_list">
<li class="nav_list_item">
<a href="#" class="nav_list_link">
<div class="nav_block_link">
<img src="img/kitchen.png" class="nav_list_link_img">
<div class="nav_list_link_txt">мебель для кухни</div>
</div>
</a>
<div class="dropbox active_dropbox">
<ul class="nav_twolvl">
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
</ul>
</div>
</li>
<li class="nav_list_item">
<a href="#" class="nav_list_link">
<div class="nav_block_link">
<img src="img/kitchen.png" class="nav_list_link_img">
<div class="nav_list_link_txt">мебель для кухни</div>
</div>
</a>
<div class="dropbox ">
<ul class="nav_twolvl">
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
</ul>
</div>
</li>
<li class="nav_list_item">
<a href="#" class="nav_list_link">
<div class="nav_block_link">
<img src="img/kitchen.png" class="nav_list_link_img">
<div class="nav_list_link_txt">мебель для кухни</div>
</div>
</a>
<div class="dropbox ">
<ul class="nav_twolvl">
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
</ul>
</div>
</li>
<li class="nav_list_item">
<a href="#" class="nav_list_link">
<div class="nav_block_link">
<img src="img/kitchen.png" class="nav_list_link_img">
<div class="nav_list_link_txt">мебель для кухни</div>
</div>
</a>
<div class="dropbox ">
<ul class="nav_twolvl">
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
<li class="nav_twolvl_list">
<a href="#" class="nav_twolvl_list_link">подкатегория</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</main>
<script>
$(".dropbox").hide();
$(".nav_list_item").mouseover(function(event) {
event.preventDefault();
$(this).children(".dropbox").addClass('active_dropbox');
$(this).children(".active_dropbox").css('display', 'block');
});
$(".nav_list_item").mouseout(function() {
event.preventDefault();
$(this).children(".active_dropbox").removeClass('active_dropbox');
$(this).children(".active_dropbox").css('display', 'none');
});
</script>
</body>
</html>$(".dropbox").hide();
$( ".nav_list_item" ).mouseover(function() {
$( this ).children( ".dropbox" ).addClass('active_dropbox');
});
$( ".nav_list_item" ).mouseout(function() {
$( this ).children( ".active_dropbox" ).removeClass('active_dropbox');
});
попробуйте все с codepan скопировать.
и проверить