OK , I've found the z-index problem with drop downs and select lists / form elements.
I've found the work-round, which means completey redesigning my menu, just to apply the fix.
That's where i'm stumped, I'm using the sucker fish CSS and the iehover-fix.js , only I cannot work out why I cant get the image to display.
here is the css...
here is the HTML
I have given the background-image yet it will not appear why?
here is a screen...
"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
I've found the work-round, which means completey redesigning my menu, just to apply the fix.
That's where i'm stumped, I'm using the sucker fish CSS and the iehover-fix.js , only I cannot work out why I cant get the image to display.
here is the css...
Code:
/** Dropdowns **/
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 70px;
}
#nav li { /* all list items */
position: relative;
float: left;
width: 70px;
background-image:url('[URL unfurl="true"]http://www.stepnstomp.co.uk/images/buttons/button1up.gif');[/URL]
}
#nav li ul { /* second-level lists */
position: absolute;
left: -5000px;
margin-left: -35px;
margin-top: 0px;
}
#nav li ul ul { /* third-and-above-level lists */
left: -5000px;
}
#nav li a {
width: 70px;
display: block;
/*font-weight: bold;*/
text-decoration: none;
padding: 3px 5px;
margin: 0;
color: #FFFFFF;
background: #5D7AC5;
text-shadow: 0px 1px 1px rgb(250,250,250);
}
#nav li a:hover {
color: #FFFFFF;
background: #5D7AC5;
border: 1px solid rgb(100,100,100);
text-shadow: 0px 0px 3px rgb(250,250,250);
}
#nav li a {
border-top: 1px solid rgb(240,240,240);
border-right: 1px solid rgb(160,160,160);
border-bottom: 1px solid rgb(160,160,160);
border-left: 1px solid rgb(240,240,240);
}
#nav a.encl {
background: #5D7AC5; url(encl.gif) center right no-repeat;
}
#nav a.encl:hover {
background: #5D7AC5; url(enclover.gif) center right no-repeat;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.iehover ul ul, #nav li.iehover ul ul ul, #nav li.iehover ul ul ul ul {
left: -5000px;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.iehover ul, #nav li li.iehover ul, #nav li li li.iehover ul, #nav li li li li.iehover ul { /* lists nested under hovered list items */
left: auto;
}
/** Support for the "iehover-fix.js" **/
#nav iframe {
position: absolute;
left: 0;
top: 0;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
/** end **/here is the HTML
Code:
<ul id=\"nav\">
<li><a href=\"#\" title=\"\" class=\"encl\">Company</a>
<ul>
<li><a href=\"#\" title=\"\">Menu 1.1.1</a></li>
<li><a href=\"#\" title=\"\">Menu 1.1.2</a></li>
<li><a href=\"#\" title=\"\">Menu 1.1.3</a></li>
<li><a href=\"#\" title=\"\">Menu 1.1.4</a></li>
</ul>
</li>
</ul>I have given the background-image yet it will not appear why?
here is a screen...
"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
