Данное меню на CSS имеет прогрессивное улучшение для поддержки различных браузеров без поддержки определенных функций. Ниже представлен скриншот, на котором вы можете посмотреть как данное меню будет отображаться в разных браузерах.

Кроссбраузерность

Простое меню на HTML+CSS3 Рис.1
Простое меню на HTML+CSS3
Рис.1

HTML

Для начала мы рассмотрим неупорядоченный список ссылок. Обратите внимание, что я вставляю вторичный список ссылок внутри каждого элемента, это будет использоваться для "выпадающего" списка и советую Вам делать точно также для создания многоярусного меню навигации.

Показать код

CSS

Стили CSS данного меню будут предназначены для настройки структуры. Для начала мы установим белый или серый цвет для данного меню. Позже мы подчеркнем различные цветовые схемы, добавляя классы к элементу UL, но это чуть позже. Сначала рассмотрим простой вариант.

Показать код
#menu {
width: 490px;
}
/*	Основное меню */	
    ul
{	font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background: #ccc;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));
    background: -moz-linear-gradient(top, #fff, #e9e9e9);
    display: block;
    clear: left;
    float: left;
    padding: 0 15px;
    margin: 0 0 10px 0;
    -webkit-box-shadow: 0 0 2px #333;
    -moz-box-shadow: 0 0 2px #333;
    box-shadow: 0 0 2px #333;
    border: 1px solid #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; }
/*	Первый уровень */
    ul li
{	margin: 0;
    float: left;
    display: block;
    list-style: none; }
    /*	Ссылки первого уровня*/	
        ul li a
    {	padding: 10px;
        display: block;
        color: #666;
        text-decoration: none;
        text-shadow: 1px 1px 1px #fff; }
        ul li a:hover
    {	color: #000; }
        /*	Второй уровень - Выпадающий  */
            ul li ul
        {	margin: 0 0 0 -15px;
            display: none;
            -webkit-border-top-left-radius: 0;
            -webkit-border-top-right-radius: 0;
            -moz-border-topleft-radius: 0;
            -moz-border-topright-radius: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0; }
            ul li:hover ul
        {	display: block;
            position: absolute; }
            /* 	Ссылки второго уровня - Выпадающий */
                ul li ul li
            {	clear: left; }

Добавление цвета

Вы можете добавить класс к элементу ul, который будет отвечать за цветовую схему нашего меню.

Я подготовил для вас готовые стили CSS разных цветов для данного меню.

Показать код
#menu {
width: 490px;
}
/*	Основное меню */	
	ul
{	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: #ccc;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e9e9e9));
	background: -moz-linear-gradient(top, #fff, #e9e9e9);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9');
	display: block;
	clear: left;
	float: left;
	padding: 0 15px;
	margin: 0 0 10px 0;
	-webkit-box-shadow: 0 0 2px #333;
	-moz-box-shadow: 0 0 2px #333;
	box-shadow: 0 0 2px #333;
	border: 1px solid #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; }

/*	Первый уровень */	
	ul li
{	margin: 0;
	float: left;
	display: block;
	list-style: none; }
	
	/*	Ссылки первого уровня*/	
		ul li a
	{	padding: 10px;
		display: block;
		color: #666;
		text-decoration: none;
		text-shadow: 1px 1px 1px #fff; }
		
		ul li a:hover
	{	color: #000; }
	
		/*	Второй уровень - Выпадающий  */
			ul li ul
		{	margin: 0 0 0 -15px;
			display: none;
			-webkit-border-top-left-radius: 0;
			-webkit-border-top-right-radius: 0;
			-moz-border-topleft-radius: 0;
			-moz-border-topright-radius: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0; }
		
			ul li:hover ul
		{	display: block;
			position: absolute; }
				
			/* 	Ссылки второго уровня - Выпадающий */
				ul li ul li
			{	clear: left; }

/* Зеленое меню */

	.green, .green li ul
{	background: #78d526;
	background: -webkit-gradient(linear, left top, left bottom, from(#78d526), to(#4a9607));
	background: -moz-linear-gradient(top, #78d526, #4a9607);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#78d526', endColorstr='#4a9607'); }
	
	.green a
{	color: #fff;
	text-shadow: 0 -1px 1px #347812; }
	
	.green a:hover
{	color: #fff; }

/*	Оранжевое меню */

	.orange, .orange li ul
{	background: #fe9436;
	background: -webkit-gradient(linear, left top, left bottom, from(#fe9436), to(#da6d0c));
	background: -moz-linear-gradient(top, #fe9436, #da6d0c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe9436', endColorstr='#da6d0c'); }
	
	.orange a
{	color: #fff;
	text-shadow: 0 -1px 1px #844915; }
	
	.orange a:hover
{	color: #fff; }

/*	Фиолетовое меню */

	.purple, .purple li ul
{	background: #dd37db;
	background: -webkit-gradient(linear, left top, left bottom, from(#dd37db), to(#901d8f));
	background: -moz-linear-gradient(top, #dd37db, #901d8f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#dd37db', endColorstr='#901d8f'); }
	
	.purple a
{	color: #fff;
	text-shadow: 0 -1px 1px #6c0d77; }
	
	.purple a:hover
{	color: #fff; }

/*	Красное меню */

	.red, .red li ul
{	background: #e01111;
	background: -webkit-gradient(linear, left top, left bottom, from(#e01111), to(#901d1d));
	background: -moz-linear-gradient(top, #e01111, #901d1d);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e01111', endColorstr='#901d1d'); }
	
	.red a
{	color: #fff;
	text-shadow: 0 -1px 1px #770d0d; }
	
	.red a:hover
{	color: #fff; }

/*	Синее меню */

	.blue, .blue li ul
{	background: #23a4ef;
	background: -webkit-gradient(linear, left top, left bottom, from(#23a4ef), to(#2272a0));
	background: -moz-linear-gradient(top, #23a4ef, #2272a0);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#23a4ef', endColorstr='#2272a0'); }
	
	.blue a
{	color: #fff;
	text-shadow: 0 -1px 1px #0d5877; }
	
	.blue a:hover
{	color: #fff; }

Вы можете использовать либо мои цвета, либо придумывать свои для создания различных образцов данного меню. Все они сделаны на CSS3 без фонового изображения, так что это будет для Вас не сложно.

Простое меню на HTML+CSS3 Рис.2
Простое меню на HTML+CSS3
Рис.2

Создавайте свои меню на любой вкус для своих сайтов.

Желаю удачи.