IE7 and a:hover

[user4fun]

Seriously some one is got to toss me a bone here. I have seen the scripts that fixes a:hover in css and IE7, but no one tells you where to put that code. Also, why in the world am I not getting anything out of this?. I mean nothing at all, not even a link recognized. I am not looking for a copy/paste answere, I really want to learn this!

<div class="nav_bar"><ul class="menu_items"><li class="homelist"><a href="home.php" class="homelink">HOME</a></li>   <ul>	 <li><a href="home.htm">1</a></li>	 <li><a href="home.htm">2</a></li>	 <li><a href="home3.htm">3</a></li>   </ul><!-- Moore lists with different class names  --></ul>

CSS CODE

ul.menu_items li a.homelink {background-position:-50px 0;margin-left:50px;width:105px;} /*an image. this part works*/ul.menu_items li.homelist{  display: none;  position: absolute;  top: 33px;  height: 15px;  left: 0;  padding-top: 10px;}  ul.menu_items li.homelist ul a{  float: left;  border: 0;  color: #f90;  width: auto;  margin-right: 15px;}ul.menu_items a.homelink:hover li.homelist ul{  display: block;}

[dsonesuk]

if trying to create submenu you do this<div class="nav_bar"><ul class="menu_items"><li class="homelist"><a href="home.php" class="homelink">HOME</a> <!--parent or top menu--> <ul> <li><a href="home.htm">1</a></li> <li><a href="home.htm">2</a></li> <li><a href="home3.htm">3</a></li> </ul></li></ul></div>you can now use :hover psuedo on li (red) to show it child ul tag (blue) and its li and links within itfirst assign position relative to parent li to set a point for the ul to work from, which is using position absolute to take out of flow from other element, and so does not take up space.ul#menu_items li{position:relative; float:left;}hides menuul#menu_items li ul {position:absolute; top: 48px; background-color:#996633; padding:0;width:200px;border:1px solid brown;overflow:hidden; left:-999999em;}shows menuul#menu_items li:hover ul {left:0;}to style inner li use ul#menu_items ul lito style inner a use ul#menu_items ul li ahope this helps, of course it gets a bit complicated when you have sub-menus within submenus, and there might not be enough colours. :-)

[user4fun]

That is fantastic, I am finally getting something to happen. The li.homelist content is not showing up, but I am atleast getting a small box to appear. It is sonewhere to start.Do you have anyadvise on the hover bug with IE. How do you know the version that the user is using and where do I get the fix for it?

[dsonesuk]

theres only a hover problem in ie6<!--[if lt IE 7]><script type="text/javascript">var sfHover;sfHover = function() {if (document.getElementById("menu_items")){var sfEls = document.getElementById("menu_items").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) { sfEls.onmouseover=function() { this.className+=" sfhover"; } sfEls.onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } }}}if (window.attachEvent) window.attachEvent("onload", sfHover);</script><![endif]-->just assign a sfhover class to element that use :hover on li elementul#menu_items li:hover ul, ul#menu_items li.sfhover ul {left:0;}