Показать сообщение отдельно
  #8 (permalink)  
Старый 07.04.2011, 16:52
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

я бы сделал так
<!DOCTYPE html>
<style type = "text/css">
*{
	margin:0px;
	padding:0px;
	font-family:helvetica, arial, sans-serif;
	font-size:14px;
}
.menu, .menu ul{
	color:#fff;
	list-style-type: none;
}

.menu > li{
	position:relative;
	width: 100px;
	display: inline-block;
	margin-right:-4px;
	cursor: pointer;
}
.menu > li > div{
	line-height: 30px;
	padding:0px 10px;
	background-color: red;
	background-color: #5af;
	border-bottom: 3px solid white;
}
.menu > li > ul > li{
	width: 80px;
	padding:0px 10px;
	cursor: pointer;
	line-height: 30px;
	border-bottom: 1px solid white;
	
}
.menu > li > ul{
	position:absolute;
	top:33px;
	left:0px;
	height:0px;
	overflow:hidden;
	background-color: transparent;
	
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	opacity: 0;
}
.menu > li:hover ul{
	
	height: 155px;
	opacity: 1;
	background-color: #5af;
}
.menu > li:hover >div{
	background-color: #05a;
}
</style>
<ul class = "menu">
	<li><div>item1&nbsp;▼</div>
		<ul>
			<li>sub0</li>
			<li>sub1</li>
			<li>sub2</li>
			<li>sub3</li>
			<li>sub4</li>
		</ul>
	</li>
	<li><div>item2&nbsp;▼</div>
		<ul>
			<li>sub0</li>
			<li>sub1</li>
			<li>sub2</li>
			<li>sub3</li>
			<li>sub4</li>
		</ul>
	</li>
	<li><div>item3&nbsp;▼</div>
		<ul>
			<li>sub0</li>
			<li>sub1</li>
			<li>sub2</li>
			<li>sub3</li>
			<li>sub4</li>
		</ul>
	</li>
</ul>
привет!

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

PS я тут в стилях накуралесил наспех, кучу всего объединить можно и будет совсем просто
__________________
readOnly

Последний раз редактировалось poorking, 07.04.2011 в 17:00.
Ответить с цитированием