WebCafe,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#icon ~ li {
transition: 1s;
opacity: 0;
}
#menu {
width: 50px;
transition: 1s;
transition-delay: .4s;
overflow: hidden;
}
#menu:hover {
width: 200px;
}
#menu:hover #icon ~ li {
opacity: 1;
}
#menu li {
list-style: none;
transition: 1s .4s;
}
#menu:hover #icon {
opacity: 0;
transition-delay: .1s;
}
#menu #icon {
transition-delay: 1.4s;
opacity: 1;
}
</style>
</head>
<body>
<div class="menu" id="menu">
<nav>
<ul>
<li class="icon" id="icon">|||</li>
<li class="menu_item">главная</li>
<li class="menu_item">о компании</li>
<li class="menu_item">портфолио</li>
<li class="menu_item">контакты</li>
<li class="menu_item">услуги</li>
<li class="menu_item">сделать заказ</li>
</ul>
</nav>
</div>
</body>
</html>