Горизонтальное меню

Nadyu · November 1, 2011

Всем привет, делаю горизонтальное меню с вкладками, которые немного "наезжают" на соседние. Пример как выглядит:

Здесь считается активной ссылка "Контакты", а мышку навели на "О нас". (Так в FF, и ie выше 7ого)

Но в ie7 справа угол не вылезает поверх активной ссылки:

Не знаю, как решить проблему, может что посоветуете?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
        <title>Test Menu</title>
        <style>
ul{
	list-style: none;
}
li{
	width: 109px;
	height: 22px;
	background:url(img/1.png);
	float: left;
	padding-left: 32px;
	padding-top:10px;
	margin-right: -32px;
	position:relative;
	z-index: 0;
}
li:hover{
	background:url(img/2.png);
	position:relative;
	z-index: 20;
}
a{
	text-decoration:none;
	color:#333;
}
li.active{
	background:url(img/2.png);
	position:relative;
	z-index: 10;
}

        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">О нас</a></li>
            <li class="active"><a href="#">Контакты</a></li>
            <li><a href="#">Отзывы</a></li>
        </ul>
    </body>
</html>

Используемые картинки:

1.png

2.png

Заранее спасибо за помощь!

psywalker · November 1, 2011

Оно?

http://jsfiddle.net/P9HYX/5/

Nadyu · November 1, 2011

Оно!

Не понимаю как работает и почему, но работает)

Спасибо.

Волшебный height...

Sign In

Горизонтальное меню

Question

Nadyu

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Nadyu

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information