Принцип работы простой, но почему-то я всё чаще сталкиваюсь с тем, что разработчики без надобости используют более сложные решения, работающие по томсму же принципу.

1. Стиль блока меню с выпадающим списком по умолчанию display:none; . При событии hover (курсор на родительском пункте меню), наш выпадающий список - display:blcok;. Остальное - только оформление.

Вот html разметка:

<ul class="test_menu">
	<li>
		<a href="№">Пункт меню с выпадающим списком</a>
		<ul>
			<li><a href="#">Пункт меню</a></li>
			<li><a href="#">Пункт меню</a></li>
		</ul>
	</li>
	<li><a href="#">Пункт меню</a></li>
	<li><a href="#">Пункт меню</a></li>
</ul> 

Здесь стили нашего меню:

  .test_menu{
  width:300px;
  }
.test_menu li{
	list-style-type:none;
	position:relative;
	z-index:100;
}
.test_menu li a{
	background: #CFCFCF;
	color: #0B3A66;
	text-decoration:none;
	display:block;
	font-size: 15px;
    line-height:38px;
	border-bottom:1px solid #fff;
	padding:0 0 0 10px;
}
.test_menu li a:hover{
	background: #0B3A66;
	color: #fff;
}
.test_menu li ul a{
	background: #F2F2F2;
	color: #0B3A66;
}
.test_menu li.active ul.small a:hover{
	background: #0B3A66;
	color: #fff;
}
.test_menu li ul{
	display:none;
}
.test_menu li:hover ul{
	display:block;
	position:absolute;
	top:0px;
	left:300px;
}
.test_menu li ul li a{
	width:300px;
}

Такой будет результат:

• Пункт меню с выпадающим списком
  • Пункт меню
  • Пункт меню
• Пункт меню
• Пункт меню