Випадне меню

Просте випадне меню на блоках

by oleksandr_s

HTML

<div id="container">
	<div id="first">FirstBlock
		<div id="block1">
			<p><a href="#">Item1</a></p>
			<p><a href="#">Item2</a></p>
			<p><a href="#">Item3</a></p>
		</div>
	</div>
	<div id="second">SecondBlock
		<div id="block2">
			<ul>
				<li><a href="#">Item4</a></li>
				<li><a href="#">Item5</a></li>
				<li><a href="#">Item6</a></li>
			</ul>
		</div>
	</div>
</div>
<div>
	<p>
    Sed mollit dolore exercitation consequat sed dolor sint culpa laboris irure commodo id sint ex eiusmod ullamco id voluptate ad occaecat ut occaecat dolor irure sunt fugiat irure voluptate esse aute commodo ea voluptate proident deserunt id non cupidatat.
	</p>
</div>

CSS

body {
    font-family: calibri;    
}

#container {
	display: flex;
	justify-content: space-between;
	text-align: center;
	height: 80px;
}

#first, #second {
	background-color: purple;
	color: white;
	font-weight: bold;
    font-size: 30px;
	width: 49%;
	margin: auto;
	height: 80px;
	line-height: 80px;
}

#block1 p {
	text-align: center;
    line-height: 20px;
}

#container a {
	text-decoration: none;
}

#block2 ul {
	list-style: none;
	margin: 0;
	padding: 0;
    line-height: 40px;
}

#block1, #block2 {
	display: none;
	position: relative;
	height: auto;
	padding: 10px;
	background-color: blue;
    font-size: 20px;
}

#first:hover > #block1 {
	display: inherit;
}

#second:hover > #block2 {
	display: inherit;
}

p {
	text-align: justify;
}

a {
	color: white;
}