выпадающее меню на новом слое

by Ksenia Polyakova

HTML

<div class="container">
	<a href="#" class="menulink">menu</a>
	<div class="menu"></div> <!-- тот, кого показывают, должен быть в коде ниже, чем блок - "событие", также они должны быть в общем родителе -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio architecto minima dolorum dolore totam libero aliquid, adipisci in suscipit, autem deserunt ratione animi esse dolor ullam fugiat beatae explicabo eum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus neque dolorem repellendus cumque assumenda unde iusto doloribus saepe. Commodi saepe amet soluta id, harum? Ipsum illum neque maxime quo fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, totam, odio. Iusto assumenda eligendi recusandae accusamus accusantium iste possimus sequi quaerat doloremque, nobis fuga quidem soluta officia. Sunt, veritatis esse.</p>
</div>

CSS

.container {
	width:500px;
	height: 500px;
	background-color: lime;
	position: relative; /* для позиционировая слоя с меню*/
}

.menulink {
	display: block;
	width: 100px;
	height: 30px;
	line-height: 30px;
	text-align:center;
	float:right;
	background-color:olive;
}
.menu {
	display: none; /* изначально блок скрыт */
	background-color: olive;
	width: 100px;
	height: 100px;
	position: absolute;
	top:30px;
	right: 0;
	}

.menulink:hover ~ .menu {
	display: block;
	background-color: olive;
	width: 100px;
	height: 100px;
	position: absolute;
	top:30px;
	right: 0;
	z-index:2;
	
}

.menu:hover {
	display: block;
}