Tengo el problema de que el menu desplegable hecho en css se ven tapados algunos items por un gif animado. Este problema no se presenta en Explorer pero si en los otros navegadores como firefox, opera , chrome.
Alguien me puede decir que propiedades del css debe codificar.
Código:
.logo
{
display : block;
position: absolute;
z-index:55;
left: 520px; /*Position*/
top: 60px; /*Position*/
width: 380px; /*Image width*/
height: 143px; /*Image height*/
background-image: url('../images/logo.gif'); /*Image path*/
background-repeat:no-repeat;
background-position: 0 0;
}
Código:
/* begin Menu */
/* menu structure */
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}
.art-menu, .art-menu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.art-menu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}
.art-menu li:hover
{
z-index: 10000;
white-space: normal;
}
.art-menu li li
{
float: none;
}
.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}
.art-menu li:hover>ul
{
visibility: visible;
top: 100%;
}
.art-menu li li:hover>ul
{
top: 0;
left: 100%;
}
.art-menu:after, .art-menu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-menu, .art-menu ul
{
min-height: 0;
}
.art-menu ul
{
background-image: url(../images/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/* menu structure */
.art-menu
{
padding: 3px 3px 3px 3px;
}
.art-nav
{
position: relative;
height: 29px;
z-index: 100;
}
.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 29px;
background-image: url('../images/nav.png');
}
.art-nav .l
{
left: 0;
right:0px;
}
.art-nav .r
{
right: 0;
width: 990px;
clip: rect(auto, auto, auto, 990px);
}
/* end Menu */
/* begin MenuItem */
.art-menu ul li
{
clear: both;
}
.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 23px;
cursor: pointer;
text-decoration: none;
margin-right: 4px;
margin-left: 4px;
}
.art-menu a .r, .art-menu a .l
{
position:absolute;
display: block;
top:0;
z-index:-1;
height: 69px;
background-image: url('../images/MenuItem.png');
}
.art-menu a .l
{
left:0;
right:8px;
}
.art-menu a .r
{
width:416px;
right:0;
clip: rect(auto, auto, auto, 408px);
}
.art-menu a .t
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #BFBFBF;
padding: 0 5px;
margin: 0 8px;
line-height: 23px;
text-align: center;
}
.art-menu a:hover .l, .art-menu a:hover .r
{
top:-23px;
}
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top:-23px;
}
.art-menu li:hover a .l, .art-menu li:hover a .r
{
top:-23px;
}
.art-menu a:hover .t
{
color: #D4D4D4;
}
.art-menu li:hover a .t
{
color: #D4D4D4;
}
.art-menu li:hover>a .t
{
color: #D4D4D4;
}
.art-menu a.active .l, .art-menu a.active .r
{
top: -46px;
}
.art-menu a.active .t
{
color: #FFFFFF;
}
/* end MenuItem */
/* begin MenuSubItem */
.art-menu ul a
{
display:block;
text-align: center;
white-space: nowrap;
height: 26px;
width: 180px;
overflow:hidden;
line-height: 26px;
margin-right: auto;
background-image: url('../images/subitem-bg.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: #C7C7C7;
}
.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}
.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 26px;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.art-menu ul ul a
{
margin-left: auto;
}
.art-menu ul li a:hover
{
color: #FFFFFF;
border-color: #FFFFFF;
background-position: 0 -26px;
}
.art-menu ul li:hover>a
{
color: #FFFFFF;
border-color: #FFFFFF;
background-position: 0 -26px;
}
.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #FFFFFF;
}
.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #FFFFFF;
}
/* end MenuSubItem */
