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

Код: Выделить всё

nav {
	margin: 100px auto; 
	text-align: center;
	display: block;
}

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}

nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
	list-style: none;
	position: relative;
	display: inline-table;
}

nav ul:after {
	content: "";
	clear: both;
	display: block;
}

nav ul li {
	float: left;
}

nav ul li:hover {
	background: #4b545f;
	background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
	background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

nav ul li:hover a {
	color: #fff;
	text-decoration: none;
}
		
nav ul li a {
	display: block;
	padding: 10px 40px;
	color: #757575;
	text-decoration: none;
	font-family: Helvetica,sans-serif;
	line-height: 24px;
}		
		
nav ul ul {
	background: #5f6975;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px; 
	padding: 0;
	position: absolute;
}

nav ul ul li {
	float: none; 
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a;
	position: relative;
}

nav ul ul li a {
	padding: 10px 40px;
	color: #fff;
}

nav ul ul li a:hover {
	background: #4b545f;
}

nav ul ul ul {
	position: absolute;
	left: 100%;
	top: 0;
}
В то место где нам нужна навигация, добавляем html структуру нашего меню:

Код: Выделить всё

<nav>
	<ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">Форум</a>
			<ul>
				<li><a href="#">Пункт 1</a></li>
				<li><a href="#">Пункт 2</a></li>
				<li><a href="#">Пункт 3</a>
					<ul>
						<li><a href="#">Пункт 3.1</a></li>
						<li><a href="#">Пункт 3.2</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Статьи</a>
			<ul>
				<li><a href="#">Пункт 1</a></li>
				<li><a href="#">Пункт 2</a></li>
			</ul>
		</li>
		<li><a href="#">О нас</a></li>
	</ul>
</nav>
Всё просто и понятно. Для добавления или удаления пунктов в выпадающем списке, удаляем или добавляем:

Код: Выделить всё

<li><a href="#">Пункт 1</a></li>

Как обычно, во всей своей красе навигация будет работать только в современных браузерах.
Комментарии: 10

romaamor 30 сен 2012, 21:46 Сообщение

Установил это меню. Стало отлично.Вопрос.Где в теме меняется размер шрифта ?
  • 0

CabinetAdmin 01 окт 2012, 14:07 Сообщение

Добавь font-size: 12px; к nav ul li a {:

Код: Выделить всё

nav ul li a {
   display: block;
   padding: 10px 40px;
   color: #757575;
   text-decoration: none;
   font-family: Helvetica,sans-serif;
   line-height: 24px;
   font-size: 12px;
}
12px меняй по своему усмотрению.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 18 окт 2012, 22:30 Сообщение

А можно сделать вот такую чорную обводку вокруг меню ?
Изображение
  • 0

CabinetAdmin 19 окт 2012, 14:13 Сообщение

Можно, почему нет:)

Добавь:

Код: Выделить всё

border-bottom: 1px solid #000;
к

Код: Выделить всё

nav ul {
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 19 окт 2012, 16:18 Сообщение

Получается только по низу.А как сделать что бы было вокруг ?
  • 0

CabinetAdmin 19 окт 2012, 16:24 Сообщение

Можно сделать так:

Код: Выделить всё

   border-style: solid;
   border-width: 1px;
   border-color: #999 #555 #333;
Снизу будет тёмная полоса, сбоку чуть посветлее, сверху самая светлая.

Если, например, нижнюю нужно толще, то:

Код: Выделить всё

   border-width: 1px 1px 2px;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 19 окт 2012, 16:28 Сообщение

CabinetAdmin писал(а):Снизу будет тёмная полоса, сбоку чуть посветлее, сверху самая светлая.
Ну,так конечно по круче будет. :)
  • 0

CabinetAdmin 19 окт 2012, 16:50 Сообщение

Кстати, я не подумал сначала, во всплывающем списке тоже ведь <ul> используется и у него тоже появится полоса. Чтобы её там не было, нужно для nav ul ul { добавить:

Код: Выделить всё

border: 0;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 08 фев 2013, 07:22 Сообщение

А как сделать текст жирнее ?
  • 0

CabinetAdmin 08 фев 2013, 14:43 Сообщение

Добавь к nav ul li a {:

Код: Выделить всё

font-weight: bold;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы