After realizing that htc files only work with Internet Explorer, I have needed to have JavaScript code to suit the two lots of css code below. Please help, I need the code pretty urgently. The code must work with most versions of browsers.
The horizontal css code is here:
#mainMenu {
list-style:none;
position:relative;
z-index:10;
float:left;
width:100%;
/* fixed px height background == px fonts */
font:normal 14px/16px arial,helvetica,sans-serif;
background:url(images/roundedBorders.png) 0 0 no-repeat;
}
#mainMenu li {
position:relative;
float:left;
/*white-space:nowrap;*/
}
#mainMenu li a {
float:left;
padding:8px;
margin-left:12px;
text-decoration:none;
color:#FFF;
background:#39E url(images/roundedBorders.png) -12px 0 no-repeat;
}
#mainMenu li:hover a {
background-color:#13E;
background-position:-910px 0;
}
#mainMenu li ul {
list-style:none;
position:absolute;
display:inline; /* fix IE 'sticking' */
top:32px;
left:-999em;
width:216px;
}
#mainMenu li:hover ul {
display:block; /* fix IE 'sticking' */
left:0;
}
#mainMenu li:hover li {
width:216px;
}
#mainMenu li:hover li a {
float:none !important;
display:block;
zoom:1;
position:relative; /* make IE let you click whole thing */
background:#3A9CEE;
}
#mainMenu li li a:hover {
background:#0A2DE6;
}
The vertical css code is here:
#sideMenu {
z-index: 10;
float:left;
width:232px;
padding:2px 0;
list-style:none;
/* image interaction == px fonts */
font:normal 14px/16px arial,helvetica,sans-serif;
background:#0b2ae7;
}
#sideMenu li {
position:relative;
float:left;
display:inline; /* prevent IE margin doubling */
width:216px;
margin-left:8px;
}
#sideMenu li li {
margin:0;
}
#sideMenu a {
display:block;
padding:27px 8px;
text-decoration:none;
color:#FFF;
background:#05C url('images/btnup.gif');
}
#sideMenu ul li a:hover {
display: block;
background: #1333E7 url('images/btndown.gif');
}
#sideMenu li ul {
z-index:10;
list-style:none;
position:absolute;
display:inline; /* prevent IE 'sticking */
top:0;
left:-999em;
background:#0b2ae7; /* 35F */
/*white-space:nowrap;*/
}
#sideMenu li:hover ul {
left:216px;
}
#sideMenu li:hover li a {
padding:8px;
}
#sideMenu li ul a:hover { /* li li:hover a */
background:#0b2ae7;
}