Скрыл часть меню через display: block, через :hover при наведении на иконки - меню должно появляться, но увы... подскажите плз без использования JS
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
height: 100px;
width: 100px;
}
.icon {
height: 2000px;
width: 100px;
text-align: center;
background-color: grey;
float: left;
}
.menu li {
height: 104px;
width: 200px;
margin-bottom: 1px;
padding-bottom: -20px;
}
nav {
height: 2000px;
width: 300px;
color: white;
}
.menu {
display: none;
height: 2000px;
float: right;
background-color: grey;
}
.icon-menu {
padding-top: 33px;
}
.sticky {
position: sticky;
top: 0;
}
.sticky-menu {
position: sticky;
top: 0;
}
.sticky-menu li {
height: 104px;
}
.sticky-menu li:first-child {
height: 50px;
}
span {
display: inline-block;
margin-top: 38px;
}
nav li:hover {
background-color: #696969;
}
.icon li:hover .menu {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>DZ #5.2</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="body">
<nav>
<ul class="icon">
<div class="sticky">
<li class="icon-menu">MENU</li>
<li><img src="icon\edit.png"></li>
<li><img src="icon\favorites.png"></li>
<li><img src="icon\history.png"></li>
<li><img src="icon\security.png"></li>
<li><img src="icon\settings.png"></li>
</div>
</ul>
<ul class="menu">
<div class="sticky-menu">
<li></li>
<li><span>EDIT</span></li>
<li><span>FAVORITES</span></li>
<li><span>HISTORY</span></li>
<li><span>SECURITY</span></li>
<li><span>SETTINGS</span></li>
</div>
</ul>
</nav>
</div>
</body>
</html>