CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

0

Горизонтальное меню с подсказками на CSS

Jemand 9044 ,
CSS

1. CSS

#menu ul {
	list-style: none;
	font-family: Georgia;
	font-size: 18px;
	font-style: italic;
	line-height: 24px;
	border: 2px solid #000000;
	border-left: 1px solid #000000;
	float: left;
	padding: 0;
	margin: 12px 0 25px 24px;
	}
#menu ul li {
	float: left;
	}
#menu ul li a {
	display: block;
	text-decoration: none;
	background-color: #595959;
	padding: 5px 10px 0 10px;
	color: #fefefe;
	width: 120px;
	border-right: 1px solid #797979;
	border-left: 1px solid #191919;
	}
#menu ul li a span {
	display: block;
	}
#menu ul li a span.text-top {
	border-bottom: 1px solid #595959;
	}
#menu ul li a:hover span.text-top {
	border-bottom: 1px dashed #fefefe;
	color: #ffddbb;
	}
#menu ul li a span.text-bottom {
	visibility: hidden;
	font-size: 11px;
	text-align: right;
	}
#menu ul li a:hover span.text-bottom {
	visibility: visible;
}

2. HTML

<div id="menu">
	<ul>
		<li>
			<a href="#">
				<span class="text-top">Пункт №1</span>
				<span class="text-bottom">Подсказка №1</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="text-top">Пункт №2</span>
				<span class="text-bottom">Подсказка №2</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="text-top">Пункт №3</span>
				<span class="text-bottom">Подсказка №3</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="text-top">Пункт №4</span>
				<span class="text-bottom">Подсказка №4</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span class="text-top">Пункт №5</span>
				<span class="text-bottom">Подсказка №5</span>
			</a>
		</li>
	</ul>
</div>

Демо

Рекламная пауза

Оставить комментарий