Выпадающее меню без javascript

[skygazer]

Мне выпадающее меню дается очень с трудом. Оно, конечно у меня выпадает, но выглядит не так как хотелось бы.

http://thelast.ru/index.php?uid=599 - беру пример вот с этого, правда там вертикальное меню, а у меня горизонтальное, и это усложняет мою задачу.

Помогите пожалуйста привести все это в порядок

Код:

<div class="menu">
	<ul>
		<li><a href="#">Верстка</a></li>
		<li><a href="#">Создание сайта</a></li>
		<li><a href="#">Веб-дизайн</a></li>
		<li class="web"><a href="#">Веб-программирование</a>
			<ul>
				<li><a href="#">Java-Script</a></li>
				<li><a href="#">AJAX</a></li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">Python</a></li>
				<li><a href="#">Ruby on Rails</a></li>
			</ul>
		</li>
		<li><a href="#">CMS</a></li>
		<li style="background:#b9bbbe"><a href="#">Ресурсы</a></li>
		<li style="background:#a3a6aa; padding-right:95px;"><a href="#">Форум</a></li>
	</ul>
	</div>

.menu ul{
list-style:none;
height:25px;
margin:10px 0 0 260px;
position:relative;
height:24px;}
.menu li ul{
visibility:hidden;
position:absolute;
top:25px;}
.web:hover{
position:relative;}
.menu li:hover>ul{
visibility:visible;}
.menu li:hover>a{
color:#fff;
background:#343b44;}
.menu li{
float:left;
background:#caccce;
padding:2px 11px 2px 11px;
height:21px;}
.menu li a{
text-decoration:none;
color:#000;
font-size:79%;
display:block;}

[hedgehog]

раз уж задали .web:hover{position:relative;}, то попробуйте

.menu li ul{
left:0;
margin-left:0;
}/* прибиваем к левой границе родителя и отменяем margin-left*/
.web ul li{float:none;} /* отменяем float для выпадающих подпунктов. */

В принципе, left:0 можно опустить, но могут повылазить глюки во всяких IE7

Edited February 13, 2012 by hedgehog

[skygazer]

Запилил список, можете посмотреть тут.

Если есть какие-то замечания, готов выслушать.

У меня еще один вопрос есть, он меня уже давно мучает. Как изменить стиль отдельного пункта меню, без inline стилей?

Просто даже если пункту меню присвоить класс, все равно стиль для всех пунктов меню его перекрывает. inline-стили никто тут не одобряет, что делать?

[hedgehog]

У меня еще один вопрос есть, он меня уже давно мучает. Как изменить стиль отдельного пункта меню, без inline стилей?

Просто даже если пункту меню присвоить класс, все равно стиль для всех пунктов меню его перекрывает. inline-стили никто тут не одобряет, что делать?

Нужно почитать о наследовании стилей и вешать класс если стиль задан через .web li, то переопределить стили для .webchild.li можно так: .web .webchild, вместо li.

[skygazer]

Ясно,спасибо.

Edited February 13, 2012 by skygazer