Вертикальне меню - 2

Створення вертикального меню за допомогою маркірованого списку

by oleksandr_s

HTML

<div class="vertical-menu2">
    <h3 class="menu-title">Main Menu</h3>
  	<ul class="menu-list">
        <li><a href="">Link 1</a></li>
    	<li><a href="">Link 2</a></li>
    	<li><a href="">Link 3</a></li>
    	<li><a href="">Link 4</a></li>
  	</ul>
</div>

CSS

.vertical-menu2 {
    padding-left: 30px;
  	font-family: 'Roboto', sans-serif;
}
.menu-title {
  	text-transform: uppercase;
  	letter-spacing: 2px;
  	color: #222222;
  	font-size: 16px;
  	padding-left: 15px;
  	margin-bottom: 15px;
  	border-left: 2px solid #b99d61;
}
.menu-list {
  	padding: 0;
  	list-style: none;
}
.menu-list a:before { 
  	margin-right: 14px;
}
.menu-list a {
  	text-decoration: none;
  	display: block;
  	padding: 6px 0; 
  	letter-spacing: 1px;
  	font-weight: 300;
  	color: #444444;
}
.menu-list a:hover {
	color: #b99d61;
	font-weight: bold;
}