Здравствуйте!
У меня такая проблема. Использую Joomla 2.5.6, шаблон верстал свой, меню на сайте состоит из картинок, делал при помощи CSS. Но меню так сделано, что картинка каждого следующего пункта меню должна ложиться частично под картинку предыдущего пункта меню. Прописываю для каждого пункта меню z-index, но картинки почему-то ложатся наоборот.
Сайт
http://molbert.um.la/Ниже привожу код CSS шаблона сайта:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1250px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
div.moduletable-main {
height: 54px;
padding-left: 70px;
margin-top: -19px;
padding-left: -30px;
position: relative;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 350px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
}
#logo {
height: 337px;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
margin-left: 100px;
z-index: 1;
}
#menu {
height: 54px;
padding-left: 20px;
margin-top: -19px;
position: relative;
}
#panel {
height: 48px;
background-image: url(../images/panel.png);
background-repeat: no-repeat;
margin-top: -67px;
}
ul.menu-gormenu {
position:relative;
}
ul.menu-gormenu li {
display: inline-block;
height: 54px;
margin-top: -30px;
margin-left: -30px;
float: left;
}
ul.menu-gormenu li.item468 a{
background-image: url(../images/menu_5.png);
background-repeat: no-repeat;
z-index: 6;
}
ul.menu-gormenu li.item469 a{
background-image: url(../images/menu_4.png);
background-repeat: no-repeat;
z-index: 7;
}
ul.menu-gormenu li.item470 a{
background-image: url(../images/menu_3.png);
background-repeat: no-repeat;
z-index: 8;
}
ul.menu-gormenu li.item471 a{
background-image: url(../images/menu_2.png);
background-repeat: no-repeat;
z-index: 9;
}
ul.menu-gormenu li.item472 a{
background-image: url(../images/menu_1.png);
background-repeat: no-repeat;
z-index: 10;
}
/* Middle
-----------------------------------------------------------------------------*/
#content {
width: 1250px;
height: 634px;
background-image: url(../images/fon.jpg);
background-repeat: no-repeat;
background-position: fixed;
padding: 0 0 100px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1069px;
margin: -100px auto 0;
height: 48px;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
position: relative;
text-align: center;
}
Помогите пожалуйста понять, почему именно так меню отображается, а не так как нужно. Заранее благодарен