I have found other bugs related to using hover is CSS with IE, but I cannot find a fix for my issue. I have checked it in both IE 6 & 7 with the same results.
I have built a drop-down menu using CSS and a touch of Javascript, by combining a couple tutorials I found online. The bug is when you mouse-over the menu in IE, the sub-menu pops out, but will disappear when you mouse-over it, but it doesn't happen everytime. Sometimes, it works fine.
This site is adult related, but there is are no explict images on this page.
http://www.gwenmedia.com/blog/
Here is the code
-
#nav ul
-
{
-
list-style: none;
-
padding: 0;
-
margin: 0;
-
}
-
-
#nav li
-
{
-
float: left;
-
margin: 0 0em;
-
}
-
-
#nav li a
-
{
-
background: url(images/background.jpg) #fff bottom left no-repeat;
-
height: 1.2em;
-
line-height: 1.2em;
-
float: left;
-
width: 9.5em;
-
display: block;
-
border: 1px solid #b3b3b3;
-
color: #ffffff;
-
font-family: arial;
-
font-weight: bold;
-
font-size: 11px;
-
text-decoration: none;
-
text-align: center;
-
}
-
-
/* Hide from IE5-Mac \*/
-
#nav li a
-
{
-
float: none;
-
}
-
/* End hide */
-
-
-
-
-
#nav li ul {
-
position: absolute;
-
width: 9em;
-
left: -999em;
-
}
-
-
#nav li:hover ul {
-
left: auto;
-
-
}
-
-
#nav li:hover ul, #nav li.sfhover ul {
-
left: auto;
-
-
}
-
-
#nav li ul ul {
-
margin: -1em 0 0 10em;
-
}
-
-
-
-
#nav, #nav ul {
-
padding: 0;
-
margin: 0;
-
list-style: none;
-
line-height: 1;
-
}
-
-
-
-
#nav li:hover ul, #nav li li:hover ul {
-
left: auto;
-
-
}
-
-
#nav li:hover a
-
{
-
background: url(images/background2.jpg) #fff bottom left repeat-x;
-
}
-
[html]
<ul id="nav">
<li><a>Main Menu</a>
<ul>
<li><a href="http://www.gwenmedia.com/index2.html">Home Page</a></li>
<li><a href="http://www.gwenmedia.com/news.html">Lastest News</a></li>
<li><a href="http://www.gwenmedia.com/forum/">Forum Page</a></li>
<li><a href="http://www.gwenmedia.com/2257.html">Compliance</a></li>
</ul>
</li>
<li><a>Tour</a>
<ul>
<li><a href="http://www.gwenmedia.com/tour.html">Take A Tour</a></li>
<li><a href="http://www.gwenmedia.com/latest.html">Lastest Updates</a></li>
<li><a href="http://www.gwenmedia.com/aboutus.html">About GwenMedia</a></li>
<li><a href="http://www.gwenmedia.com/models.html">Our Models</a></li>
<li><a href="http://www.gwenmedia.com/join.html">Join Now</a></li>
</ul>
</li>
<li><a>Members</a>
<ul>
<li><a href="http://www.gwenmedia.com/members/photos1.html">Photo Galleries</a></li>
<li><a href="http://www.gwenmedia.com/members/videoclips.html">Video Clips</a></li>
<li><a href="http://gwenmedia.com/members/stories.html">Fetish Stories</a></li>
<li><a href="http://gwenmedia.com/members/v_o_d.html">Video on Demand</a></li>
</ul>
</li>
<li><a>Store</a>
<ul>
<li><a href="http://www.gwenmedia.com/catalog/">Online Store</a></li>
</ul>
</li>
<li><a>On Demand</a>
<ul>
<li><a href="http://gwenmedia.com/ondemand.html">Video On Demand</a></li>
</ul>
</li>
<li><a>Links</a>
<ul>
<li><a href="http://www.gwenmedia.com/toplist/">Toplist</a></li>
<li><a href="http://www.gwenmedia.com/girlfriends.html">Girlfriends</a></li>
<li><a href="http://www.gwenmedia.com/links.html">Links</a></li>
<li><a href="http://www.gwenmedia.com/ourbanners.html">Our Banners</a></li>
</ul>
</li>
<li><a>Join</a>
<ul>
<li><a href="http://www.gwenmedia.com/join.html">How to Join</a></li>
</ul>
</li>
<li><a>Contact</a>
<ul>
<li><a href="http://www.gwenmedia.com/contactus.html">Contact Us</a></li>
<li><a href="http://www.gwenmedia.com/forum/">Requests</a></li>
<li><a href="http://www.gwenmedia.com/contactus.html">Report Problem</a></li>
</ul>
</li>
</ul>
[/html]
-
-
<script type="text/javascript">
-
sfHover = function() {
-
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
-
for (var i=0; i<sfEls.length; i++) {
-
sfEls[i].onmouseover=function() {
-
this.className+=" sfhover";
-
}
-
sfEls[i].onmouseout=function() {
-
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
-
}
-
}
-
}
-
if (window.attachEvent) window.attachEvent("onload", sfHover);
-
</script>
-
Here are two other smaller issues with the same menu system.
When mousing over the menu, the background is supposed to change to a light grey image. It works in Mozilla and Safari, but not in IE.
Last is when mousing over the menu is Safari on a Mac, some of the text is cut off from one of the items in the sub-menu.
Any help would be super appreciated!
