Menu+submenu

Create menu with submenu

by Tolibjon Tolibov

HTML

<div class="side">
					<ul class="menu">
						<li><a href="#">меню 1</a></li>
						<li class="menu_list"><a href="#">меню 2</a>
							<ul class="submenu">
								<li><a href="#">Подменю 2.1</a></li>
								<li><a href="#">Подменю 2.2</a></li>
								
							</ul>
						</li>
						<li><a href="#">меню 3</a></li>
						<li><a href="#">меню 4</a></li>
						<li class="menu_list"><a href="#">меню 5</a>
							<ul class="submenu">
								<li><a href="#">Подменю 5.1</a></li>
								<li><a href="#">Подменю 5.2</a></li>
								<li><a href="#">Подменю 5.3</a></li>
								
							</ul>
						</li>	
						<li><a href="#">меню 6</a></li>
					</ul>
				</div>

CSS

body{
	margin:0;
	pading:0;
	font:1.2em sans-serif;
}

a{
	text-decoration:none;

}

ul{
	padding:0;
	margin:0;
	list-style:none;
}
.side{
	width:200px;
	margin:20px;
	
}
.menu a{
	display:block;
	background:#3d3d3d;
	color:white;
	padding:10px;
	border-bottom:1px solid gray;
	transition:0.3s;
	
}

.menu a:hover{
	background:#666;
	padding:10px 0 10px 20px;
}

.menu-list{
	position:relative;
	
}

.submenu{
	position:absolute;
	left:100%;
	top:0;
  width:100%
}