Hi everyone,
I am trying to make the following pop up menu work in IE
#menu {
width: 163px;
background:#fff;
color:#999;
border:1px solid #f6dad1;
border-width:1px 1px 0;
margin:10px auto;
voice-family: "\"}\"";
voice-family:inherit;
width:160px;
}
#nav>#menu {
width:160px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu ul ul li {
font-size: 1.0em;
line-height:2.0em;
display: block;
margin: 0;
text-decoration:none;
}
#menu ul ul ul li a {
line-height:1.1em;
padding:5px 0 5px 5px;
}
#menu ul ul li {
background: url(/imagens/mais.gif) 98% 50% no-repeat;
}
#menu ul ul ul li {
background: none;
}
#menu ul ul li#semmais, #menu ul ul li#semmais1 {
background-image: none;
}
#menu a {padding-left:5px;}
#menu li {position: relative; }
#menu ul ul ul {
background:#fff;
position: absolute;
top:0;
left: 100%;
width: 150%;
border:1px solid #c30; border-bottom-width:0;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
#menu ul ul ul li a:hover {color:#c30;}
#menu ul ul li {border-bottom:1px solid #f6dad1;
}
#menu ul ul ul li {border-bottom:1px solid #c30;
}
It does work in Firefox but not in IE. Do I need JS code to make it work?
ThanksIE doesn't support :hover natively for anything other than links... check this out for a fix. Hope this helps!
<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.html">http://www.xs4all.nl/~peterned/csshover.html</a><!-- m -->
I am trying to make the following pop up menu work in IE
#menu {
width: 163px;
background:#fff;
color:#999;
border:1px solid #f6dad1;
border-width:1px 1px 0;
margin:10px auto;
voice-family: "\"}\"";
voice-family:inherit;
width:160px;
}
#nav>#menu {
width:160px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu ul ul li {
font-size: 1.0em;
line-height:2.0em;
display: block;
margin: 0;
text-decoration:none;
}
#menu ul ul ul li a {
line-height:1.1em;
padding:5px 0 5px 5px;
}
#menu ul ul li {
background: url(/imagens/mais.gif) 98% 50% no-repeat;
}
#menu ul ul ul li {
background: none;
}
#menu ul ul li#semmais, #menu ul ul li#semmais1 {
background-image: none;
}
#menu a {padding-left:5px;}
#menu li {position: relative; }
#menu ul ul ul {
background:#fff;
position: absolute;
top:0;
left: 100%;
width: 150%;
border:1px solid #c30; border-bottom-width:0;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
#menu ul ul ul li a:hover {color:#c30;}
#menu ul ul li {border-bottom:1px solid #f6dad1;
}
#menu ul ul ul li {border-bottom:1px solid #c30;
}
It does work in Firefox but not in IE. Do I need JS code to make it work?
ThanksIE doesn't support :hover natively for anything other than links... check this out for a fix. Hope this helps!
<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.html">http://www.xs4all.nl/~peterned/csshover.html</a><!-- m -->