Come da titolo, ho un
sito in Joomla 1.5 con montato il template
CAMENIANHo notato che in IE il menù si imposta in verticale…qualche suggerimento per risolvere questo problema?
Ecco il css:
#navigation {
float:left;
width: 100%;
margin-top:2px;
margin-left:0px;
}
@font-face {
font-family: 'PortagoITC TT';
src: url(PortagoITC_TT.eot);
src: local('PortagoITC TT'), url('PortagoITC__TT.ttf') format('truetype');
}
#navigation ul {
list-style: none;
margin:0;
padding:0;
float: left;
}
#navigation ul ul {
margin: 0; /* all lists */
padding: 0;
}
#navigation ul li {
font-variant: small-caps;
font-family: PortagoITC TT, Trebuchet MS;
text-decoration: none;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
margin: 0 15px; /*spaziatura menu*/
padding: 0;
float: left;
list-style: none;
background: none;
display: block;
}
#navigation ul li ul {
width: 200px;
position: absolute; /* second-level lists */
z-index: 99;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: auto;
width: 200px;
}
#navigation ul li ul ul {
margin: 0; /* third-and-above-level lists */
}
#navigation ul li li {
padding: 0;
margin: 0;
width: 100%;
}
#navigation ul ul a {
width: 100%;
}
#navigation ul li:hover ul ul,
#navigation ul li:hover ul ul ul,
#navigation ul li.sfhover ul ul,
#navigation ul li.havechildsfhover ul ul,
#navigation ul li.havechild-activesfhover ul ul,
#navigation ul li.activesfhover ul ul,
#navigation ul li.sfhover ul ul ul,
#navigation ul li.havechildsfhover ul ul ul,
#navigation ul li.havechild-activesfhover ul ul ul,
#navigation ul li.activesfhover ul ul ul {
left: -999em;
}
/* This "unhides" the sub-menus (left: -999em is what hides them) */
#navigation ul li:hover ul,
#navigation ul li li:hover ul,
#navigation ul li li li:hover ul,
#navigation ul li.sfhover ul,
#navigation ul li.havechildsfhover ul,
#navigation ul li.havechild-activesfhover ul,
#navigation ul li.activesfhover ul,
#navigation ul li li.sfhover ul,
#navigation ul li li.havesubchildsfhover ul,
#navigation ul li li.havesubchild-activesfhover ul,
#navigation ul li li.activesfhover ul,
#navigation ul li li li.sfhover ul,
#navigation ul li li li.havesubchildsfhover ul,
#navigation ul li li li.havesubchild-activesfhover ul,
#navigation ul li li li.activesfhover ul {
left: auto;
}
/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#navigation ul li a {
padding:17px 0 0 0 ;
display: block;
color: #000;
font-weight: normal;
font-size:24px;
text-transform:capitalize;
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#navigation ul li a {
padding:13px 0 0 0 ;
display: block;
color: #000;
font-weight: bold;
font-size:14px;
text-transform:uppercase;
}
}
#navigation ul li {
background: transparent;
height:51px;
}
#navigation ul li span {
background:transparent;
height:51px;
padding:0px 13px ;
margin:0 ;
}
#navigation ul li a {
color:#000 ;
background: transparent;
height:51px;
}
#navigation ul li.active {
height:51px !important;
background: url(../images/menu_02.jpg) no-repeat 100% 0;
}
#navigation ul li.active span {
height:51px !important;
background: url(../images/menu_02.jpg) no-repeat 100% 0;
}
#navigation ul li.active a {
color:#ffffff !important;
height:51px !important;
background: url(../images/menu_02.jpg) no-repeat 0 0;
}
#navigation ul li:hover{
height:51px !important;
background: url(../images/menu_02.jpg) no-repeat 100% 0 ;
}
#navigation ul li:hover span {
height:51px !important;
background: transparent ;
}
#navigation ul li:hover a {
color:#ffffff !important;
height:51px !important;
background: url(../images/menu_01.jpg) no-repeat 0 0 ;
}
#navigation ul li a:hover,
#navigation ul li a:active,
#navigation ul li a:focus,
#navigation ul li a.sfhover {
color: #fff;
}
#navigation ul li:hover a,
#navigation ul li.sfhover a,
#navigation ul li.havechildsfhover a,
#navigation ul li.havechild-activesfhover a {
color: #fff;
}
#navigation ul li a.active,
#navigation ul li a.active:hover,
#navigation ul li a.active:active,
#navigation ul li a.active:focus {
color: #fff;
}
/* 2nd level and above */
#navigation ul li ul {
background: #000;
margin-top: 5px;
padding-bottom: 3px;
padding-top: 13px;
text-align:left !important;
}
#navigation ul li ul ul {
}
#navigation ul li ul li {
background: none;
}
#navigation ul li ul a {
margin: 0;
padding:10px 0 0 0;
background:none !important;
color: #fff;
font-size:12px;
}
#navigation ul li.havesubchild,
#navigation ul li.havesubchild-active{
}
#navigation ul li ul a:hover,
#navigation ul li ul a:active,
#navigation ul li ul a:focus,
#navigation ul ul li:hover,
#navigation ul ul li.sfhover,
#navigation ul ul li.havesubchildsfhover,
#navigation ul ul li.havesubchild-activesfhover,
#navigation ul ul ul li:hover,
#navigation ul ul ul li.sfhover,
#navigation ul ul ul li.havesubchildsfhover,
#navigation ul ul ul li.havesubchild-activesfhover {
background:#c35f25 ;
color: #fff;
}
#navigation ul ul li a.active,
#navigation ul ul li a.active:hover,
#navigation ul ul li a.active:active,
#navigation ul ul li a.active:focus {
background: none !important;
color: #fff;
font-weight: bold;
}
#navigation ul li li.active {
height:40px !important;
background: #c35f25 ;
}
#navigation ul li li.active span {
height:40px !important;
background: transparent ;
}
#navigation ul li li.active a {
color: white !important;
height:40px !important;
background: #c35f25 ;
}
#navigation ul li ul li ul {
margin-left:195px;
background: #5a5138;
margin-top: -30px;
padding-bottom: 3px;
padding-top: 13px;
text-align:left !important;
padding-bottom: 8px;
}
P.S. Il menù come si può notare presenta soltanto il primo livello, ovvero non ha sottomenù.
