Menu works in firefox, but doesn't in IE
Posted: Sun Aug 05, 2007 3:46 pm
Yeah, I know. How often is it that something doesn't work in IE!?
Here's the problem:
I have a popout menu I mostly got off the internet, but updated for my uses and current times, it works perfectly in FF, but when I go to IE, it yells about active content, then even if I allow, nothing works. It doesn't do this where I got the code, so I need help figuring out where I went wrong.
Here's the code:
The JS is written with jquery.
Can you see where I went wrong?
Here's the problem:
I have a popout menu I mostly got off the internet, but updated for my uses and current times, it works perfectly in FF, but when I go to IE, it yells about active content, then even if I allow, nothing works. It doesn't do this where I got the code, so I need help figuring out where I went wrong.
Here's the code:
Code: Select all
#leftcontent {
width: 117px;
background: white;
}
ul#sidenav {
margin: 0;
padding: 0;
list-style: none;
width: 116px; /* Width of Menu Items */
}
ul#sidenav li {
position: relative;
}
ul#sidenav li ul {
position: absolute;
left: 115px; /* Set 1px less than menu width */
top: 0;
display: none; /* hide submenus */
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid black;
z-index:1000;
}
ul#sidenav li a { /* Styles for Menu Items */
display: block;
text-decoration: none;
color: black;
background: #dddddd; /* IE6 Bug */
padding: 5px;
}
ul#sidenav li a:hover,
ul#sidenav li a:focus { /* Hover Styles */
color: white;
background: #3366cc;
}
ul#sidenav li ul li a { /* Sub Menu Styles */
padding: 2px 5px;
color: black;
background: #EEEEEE;
border: 1px solid black;
border-bottom: 0;
}
ul#sidenav li:hover ul,
ul#sidenav li:focus ul,
ul#sidenav li.over ul {
display: block; /* display submenu on mouseover */
}
Code: Select all
<div id="leftcontent">
<ul id="sidenav">
<li><a href="index.html">Home</a></li>
<li><a href="commercial.html">Commercial</a></li>
<li><a href="residential.html">Residential</a><ul>
<li><a href="multifamily.html">Multifamily</a></li>
<li><a href="singlefamily.html">Single-Family Detached</a></li>
<li><a href="additions.html">Additions / Alterations</a></li></ul>
</li>
</ul>
</div>Code: Select all
setupLinkbar=function(){
$('#sidenav ul li').hover(
function(){
$('ul',this).addClass('over').show();
},
function(){
$('ul',this).removeClass('over').hide();
}
);
}
$(setupLinkbar);Can you see where I went wrong?