Сделал на
сайте динамическое меню с использованием CSS, которе взял из статьи
Динамическое выпадающие меню для IE без использования скриптов JavaScript с сайта
realcoding.net.
Но, возникла проблема с перектытием слоев. Меню первого уровня находится НАД подменю.
Вот код, используемый в
style.css
div#menu {
font: 10px Verdana, sans-serif;
height: 15px;
white-space: nowrap;
width: 100%;
position: relative;
z-index:1;
}
div#menu .a {
display: inline;
position: absolute;
z-index: -1;
text-decoration: none;
clip: auto;
}
div#menu .a table {
position: absolute;
display: block;
font: 10px Verdana, sans-serif;
z-index: 10;
}
div#menu table, div#menu table a {
display: none;
}
div#menu .a:hover{
text-decoration: underline;
margin-right:0px;
}
div#menu div.menuitem:hover {
text-decoration: underline;
margin-right:0px;
z-index:1;
}
div#menu .a:hover table, div#menu div.menuitem:hover table{
background: #FFFFFF;
border: 1px solid #708090;
display: list-item;
white-space: nowrap;
position:relative;
z-index:1;
}
div#menu .a:hover table a, div#menu div.menuitem:hover table a {
color: #000000;
display: block;
padding: 1px 12px;
text-decoration: none;
white-space: nowrap;
z-index:2;
position:relative;
}
div#menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover {
background: #7DA6EE;
border: 1px solid #000000;
color: #000000;
display: block;
padding: 0px 12px;
text-decoration: none;
position:relative;
z-index:2;
}
td {
border-width: 0px;
padding: 0px 0px 0px 0px;
}
.menuitem {
float: left;
margin: 1px 1px 1px 1px;
padding: 1px 1px 1px 1px;
}
.menuitem * {
padding: 0px 0px 0px 0px;
}
#other {
height: auto;visibility: visible;
}
#moz{
height: 1px;visibility: hidden;
}
#moz::-moz-cell-content{
height: auto; visibility: visible;
}
#other::-moz-cell-content{
height: 1px; visibility: hidden;
}
#holder {
width: 100%;
}
Помогите разобраться, найти ошибку.