IE CSS3 li:hover bug

Hello there,

Still struggling with IE 6,7,8, I can't get the hover behaviour to work with IE, any version.

It does work with Firefox, Safari and Opera, without a problem. I have tried the HTC fix, I also tried many thing like 'DOCTYPE', Z-index, no success.

Here is the CSS Code I'm using :

ul#css3menu,ul#css3menu ul{
      margin:0;list-style:none;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu ul{
      display:none;position:absolute;left:-1px;top:98%;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;padding:0 9px 9px;background-color:#FFF;background-image:none;border-width:1px;border-style:solid;border-color:#d8d9da;}
ul#css3menu li:hover>*{
      display:block;
      cursor:pointer;
      cursor:hand;
      z-index:30;
      visibility:visible;
      }
ul#css3menu a:hover>*{
      display:block;
      cursor:pointer;
      cursor:hand;}
ul#css3menu li:hover {
      position:relative;}
ul#css3menu ul ul{
      position:absolute;left:98%;top:-2px;}
ul#css3menu{
      padding:1px 1px 1px 0;display:block;font-size:0;float:left;}
ul#css3menu li{
      display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
      margin:0 0 0 1px;}
ul#css3menu ul>li{
      margin:1px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
      outline-style:none;}
ul#css3menu a{
      display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial,sans-serif;color:#464646;cursor:default;padding:10px;background-color:#32d2ef;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");background-position:0 50%;border-width:0px;border-style:none;border-color:#6655FF;}
ul#css3menu ul li{
      float:none;margin:9px 0 0;}
ul#css3menu ul a{
      text-align:left;padding:8px 0 0 0;background-color:#FFF;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#D9D9D9;font:13px Arial,sans-serif;color:#333333;text-decoration:none;}
ul#css3menu li:hover>a{
      background-color:#19d7ea;border-color:#665500;border-style:none;font:bold 12px Arial,sans-serif;color:#efefef;text-decoration:none;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");background-position:0 100%;}
ul#css3menu img{
      border:none;vertical-align:middle;margin-right:20px;width:24px;height:24px;}
ul#css3menu ul img{
      width:6px;height:12px;}
ul#css3menu img.over{
      display:none;}
ul#css3menu li:hover > a img.def{
      display:none;}
ul#css3menu li:hover > a img.over{
      display:inline;
            display:block;
      cursor:pointer;
      cursor:hand;
      z-index:30;
      visibility:visible;}
ul#css3menu span{
      display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul li:hover>a{
      background-color:#FFF;background-image:none;border-style:solid;border-color:#D9D9D9;font:13px Arial,sans-serif;color:#0088CC;text-decoration:none;}
ul#css3menu li.topfirst>a{
      height:16px;line-height:16px;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;text-shadow:#d8d8d8 0px 1px 1px;}
ul#css3menu li.topfirst:hover>a{
      line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu._>li>a{
      padding:0;}
ul#css3menu li.subfirst>a{
      background-color:#FFF;background-image:none;border-width:0;border-style:none;padding:0;font:13px Arial,sans-serif;color:#333333;text-decoration:none;}
ul#css3menu li.subfirst:hover>a{
      background-color:#FFF;background-image:none;border-style:none;font:13px Arial,sans-serif;color:#0088CC;text-decoration:none;}
ul#css3menu li.topitem>a{
      height:16px;line-height:16px;text-shadow:#d8d8d8 0px 1px 1px;}
ul#css3menu li.topitem:hover>a{
      line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.toplast>a{
      height:16px;line-height:16px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0 4px 4px 0;text-shadow:#d8d8d8 0px 1px 1px;}
ul#css3menu li.toplast:hover>a{
      line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}


I really am hopeless and you are my last chance to make it work. Thanks to you all in advance.

Adam.

adam1hAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

R-ByterCommented:
This code is a real mess, no offense. :)
What HTC fix did You use since I used one that works with ie6,ie7,ie8...

Regards
LZ1Commented:
Can you maybe post a live link or your HTML structure as well?
imantasCommented:
Are you sure your declaration of DOCTYPE is correct. Most of those "cool" CSS properties doesn't work in quirks mode. Make sure you follow standards.
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

adam1hAuthor Commented:
Hi,

thanks for your replies.

@Imantas : here is the doctype I used (I tried a lot of different ones...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

@LZ1 :

Here is what I have in my .cfm (it is Coldfusion files, not HTML, but it still should work)

 
    <li class="topfirst"><a href="../../EN/products/products_cats.cfm?catname=All necklaces&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Necklaces"><span>Necklaces</span></a>
    <ul>
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All necklaces&rngname=all&items=12&page=1&sortby=<cfoutput>#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All necklaces">All necklaces</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=necklace&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular necklaces">Regular necklaces</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=necklace long&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Long necklaces">Long necklaces</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Necklace choker&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Choker necklaces">Choker necklaces</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Necklace chain&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Chain necklaces">Chain necklaces</a></li>
        <cfset catToEncode = "Necklace & bracelet set">
        <li><a href="../../EN/products/products_results.cfm?catname=<cfoutput>#urlEncodedFormat(catToEncode)#&rngname=all&items=#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Necklace and bracelet sets">Necklace and bracelet sets</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Necklace with pendant&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Necklaces with pendant">Necklaces with pendant</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Pendant&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Pendants">Pendants</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="../../EN/products/products_cats.cfm?catname=All bracelets&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Bracelets"><span>Bracelets</span></a>
    <ul>
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All bracelets&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All bracelets">All bracelets</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Bracelet&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular bracelets">Regular bracelets</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Bangle&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Bangles">Bangles</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Bracelet  or anklet&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Bracelet  or anklet">Bracelet  or anklet</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="../../EN/products/products_cats.cfm?catname=All rings&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Rings">Rings</a>    
    <ul>
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All rings&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All rings">All rings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Ring&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular rings">Regular rings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Ring for toes&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Rings for toes">Rings for toes</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Ring for thumbs&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Rings for thumbs">Rings for thumbs</a></li>
    </ul>
    </li>
   
    <li class="topitem"><a href="../../EN/products/products_cats.cfm?catname=All accessories&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Accessories"><span>Accessories</span></a>
    <ul>
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All accessories&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All accessories">All accessories</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Purse&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Purses">Purses</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Belt&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Belts">Belts</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Bag&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Hand bags">Hand bags</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Scarves&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Scarves">Scarves</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Keyring&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Keyrings">Keyrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Tattoos&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Tattoos">Tattoos</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Jewellery box&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Jewellery boxes">Jewellery boxes</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Magnet&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Magnets">Magnets</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Wrist watch&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Wrist watches">Wrist watches</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Brooch&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Brooches">Brooches</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Clutch pin&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Clutch pins">Clutch pins</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Handbag Charm&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Handbag Charms">Handbag Charms</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Zip pull&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Zip pulls">Zip pulls</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="../../EN/products/products_cats.cfm?catname=All earrings&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Earrings"><span>Earrings</span></a>
    <ul>
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All earrings&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All earrings">All earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring drop&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Drop earrings">Drop earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring stud&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Stud earrings">Stud earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring hoop&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Hoop earrings">Hoop earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring pin&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Pin earrings">Pin earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring stud  drop&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Earring stud drop">Earrings stud drop</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring clip&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Earring clip">Earrings clip</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="../../EN/products/products_cats.cfm?catname=All body jewellery&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Body jewellery"><span>Body jewellery</span></a>
    <ul>
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All body jewellery&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All body jewellery">All body jewellery</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Body jewellery&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular body jewellery">Regular body jewellery</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Belly jewellery&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Belly jewellery">Belly jewellery</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Nose stud&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Nose studs">Nose studs</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Nose or ear stud&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Nose or ear studs">Nose or ear studs</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="../../EN/products/products_results.cfm?catname=Anklet&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Anklets">Anklets</a></li>
    <li class="topitem"><a href="../../EN/products/products_cats.cfm?catname=All hairwear&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Hairwear"><span>Hairwear</span></a>
    <ul>
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All hairwear&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All hairwear">All hairwear</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Hairwear&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular Hairwear">Regular Hairwear</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Hairpin&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Hairpins">Hairpins</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="../../EN/products/products_results.cfm?catname=Component&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Components">Components</a></li>
    <li class="topitem"><a href="../../EN/products/products_cats.cfm?catname=All charms&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Charms"><span>Charms</span></a>
    <ul>
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All charms&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All charms">All charms</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Charms&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular charms">Regular charms</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Phone charm&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Phone charms">Phone charms</a></li>
    </ul>
    </li>
    <li class="toplast"><a href="../../EN/products/products_cats.cfm?catname=All displays&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Displays">Displays</a>
    <ul>
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All displays&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All displays">All displays</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Display stand&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Display stands">Display stands</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Display aid&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Display aid">Display aid</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Gift packaging&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Gift packaging">Gift packaging</a></li>
    </ul>
   
    </li>
</ul>


Many thanks to both.
Adam
R-ByterCommented:
Use this css hover htc solution:

http://www.xs4all.nl/~peterned/csshover.html

Then add this to Your page:

<style type="text/css">
body {
    behavior: url("csshover3.htc");
}
</style>

U can use hover on any element with this.

Regards
imantasCommented:
Erm.. I can't find a problem here. What's not working here? Menu works on my IE7 and IE8. Only thing I had to do is to add "<ul id="css3menu">" at the start of your HTML code. Find images attached.
IE7.PNG
imantasCommented:
Oops. Also IE8
IE8.PNG
adam1hAuthor Commented:
Hello R-Byter,

We managed to make it work in between; Just that the menu appears at the bottom left, very far away from the menu itself.

Should I try to play with z-index to bring it back under the button where it shoudl appear ?

Many thanks for your help guys,
Adam
R-ByterCommented:
Do You have a link to that page?
z-index wont move Your menu, it will only put it in some layer.

Regards
adam1hAuthor Commented:
Hey Imantas !

I'm really puzzeld as it seems to work fine on your IEs ???

It doesn't show at the right place here, does it show at the right place at your now ???

Many thanks
Adam
adam1hAuthor Commented:
Hey R-Byter,

I can't show the page, as the website is live, and I only access it by login in with a special login that shows it, sorry.

When I'm sure it displays correctly, then I will put it live.

Imantas seems to be able to display it ???

Thanks
Adam
imantasCommented:
Test the file attached. It's the exact file I've tested on my IEs.
default.htm
adam1hAuthor Commented:
Hey Imantas,

You test runs fine, but online, it is still not under the button for example, under the button 'necklace', it drops down fine in FF.

We are calling another stylesheet, identical to FF stylesheet, styleIE.css(calling csshover.htc), and I'm trying to make it exactly as it is in FF, but is shows the menu bottom  left handside, very far away.

Any ideas why ?

This style sheet has been generated by css3menu program, and is supposed to work in any browser, but not mine...

Thanks for your help
Adam

imantasCommented:
Maybe you have some tags unclosed?
adam1hAuthor Commented:
Hey Imantas,

Well, I checked every tag of the CSS, seems fine to me, however I'm not a scientist in this matter...

It is very frustrating  to be so close from the Goal, it appears, but just at the wrong place, and I can't figure out where it happens.

I'm sure it is in

ul#css3menu li.subfirst>a{
    background-color:#FFF;
    background-image:none;
    border-width:0;
    border-style:none;
    padding:0;
    font:13px Arial,sans-serif;
    color:#333333;
    text-decoration:none;
    }
ul#css3menu li.subfirst:hover>a{
    background-color:#FFF;
    background-image:none;
    border-style:none;
    font:13px Arial,sans-serif;
    color:#0088CC;
    text-decoration:none;
    }

That the problem happens. Hey, thanks for your help.

Adam
imantasCommented:
Could you please save the output (the actual online version of code) and provide it here if you cannot provide link.
adam1hAuthor Commented:
Hi Imantas,

Sorry for yesterday, I'm back to work now.

So, here is the CSS file :
body { behavior: url(/dropmenu_files/csshover3.htc);
}

ul#css3menu,ul#css3menu ul{
    margin:0;
    list-style:none;
    background-color:#C0C0C0;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");background-repeat:repeat;border-width:0px;
    border-style:solid;
    /*border-color:#999999;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;*/
    border-radius:4px;
    }
ul#css3menu ul{
    display:none;
    position:absolute;
    left:-1px;top:98%;
    -moz-box-shadow:0.7px 1px 1px #777777;
    -webkit-box-shadow:0.7px 1px 1px #777777;
    box-shadow:0.7px 1px 1px #777777;
    padding:0 9px 9px;
    background-color:#FFF;
    background-image:none;
    border-width:1px;
    border-style:solid
    ;border-color:#d8d9da;
    }
ul#css3menu li:hover>*{
    display:block;
    cursor:pointer;
    cursor:hand;
    }
ul#css3menu a:hover>*{
    display:block;
    cursor:pointer;
    cursor:hand;
    }
ul#css3menu li:hover {
    position:relative;
    }
ul#css3menu ul ul{
    position:absolute;
    eft:98%;top:-2px;
    }
ul#css3menu{
    padding:1px 1px 1px 0;
    display:block;
    font-size:0;
    float:left;
    }
ul#css3menu li{
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
    }
ul#css3menu>li,ul#css3menu li{
    margin:0 0 0 1px;
    }
ul#css3menu ul>li{
    margin:1px 0 0;
    }
ul#css3menu a:active, ul#css3menu a:focus{
    outline-style:none;
    }
ul#css3menu a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 12px Arial,sans-serif;
    color:#464646;
    cursor:default;
    padding:10px;
    background-color:#32d2ef;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");
    background-position:0 50%;
    border-width:0px;
    border-style:none;
    border-color:#6655FF;
    }
ul#css3menu ul li{
    float:none;
    margin:9px 0 0;
    }
ul#css3menu ul a{
    text-align:left;
    padding:8px 0 0 0;
    background-color:#FFF;
    background-image:none;
    border-width:1px 0 0 0;
    border-style:solid;
    border-color:#D9D9D9;
    font:13px Arial,sans-serif;
    color:#333333;
    text-decoration:none;
    }
ul#css3menu li:hover>a{
    background-color:#19d7ea;
    border-color:#665500;
    border-style:none;
    font:bold 12px Arial,sans-serif;
    color:#efefef;
    text-decoration:none;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABsCAYAAACrf9gNAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFEgYCO8oxcpkAAABlSURBVCjPjZA7CoBADETfTnIB739GGysLIRaCsiGRbYYJ+fAyAJsACRgCrHN6XSU+j3jR8N8N68okwyLiEHC9cn6OiHAmcOvQVJC2zNULLX3KTwL2uWwjVnfZFz9aiDiFk1geyBuO2g6m9q0GQQAAAABJRU5ErkJggg==");
    background-position:0 100%;
    }
ul#css3menu img{
    border:none;
    vertical-align:middle;
    margin-right:20px;
    width:24px;
    height:24px;
    }
ul#css3menu ul img{
    width:6px;
    height:12px;
    }
ul#css3menu img.over{
    display:none;
    }
ul#css3menu li:hover > a img.def{
    display:block;
    }
ul#css3menu li:hover > a img.over{
    display:block;
    }
ul#css3menu span{
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
    }
ul#css3menu ul li:hover>a{
    background-color:#FFF;
    background-image:none;
    border-style:solid;
    border-color:#D9D9D9;
    font:13px Arial,sans-serif;
    color:#0088CC;
    text-decoration:none;
    }
ul#css3menu li.topfirst>a{
    height:16px;
    line-height:16px;
    border-radius:4px 0 0 4px;
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    text-shadow:#d8d8d8 0px 1px 1px;
    }
ul#css3menu li.topfirst:hover>a{
    line-height:16px;
    text-shadow:#3d3d3d 0px -1px 1px;
    }
ul#css3menu._>li>a{
    padding:0;
    }
ul#css3menu li.subfirst>a{
    background-color:#FFF;
    background-image:none;
    border-width:0;
    border-style:none;
    padding:0;
    font:13px Arial,sans-serif;
    color:#333333;
    text-decoration:none;
    }
ul#css3menu li.subfirst:hover>a{
    background-color:#FFF;
    background-image:none;
    border-style:none;
    font:13px Arial,sans-serif;
    color:#0088CC;
    text-decoration:none;
    }
ul#css3menu li.topitem>a{
    height:16px;
    line-height:16px;
    text-shadow:#d8d8d8 0px 1px 1px;
    cursor:pointer;
    cursor:hand;
    }
ul#css3menu li.topitem:hover>a{
    line-height:16px;
    text-shadow:#3d3d3d 0px -1px 1px;
    cursor:pointer;
    cursor:hand;
    }
ul#css3menu li.toplast>a{
    height:16px;
    line-height:16px;
    border-radius:0 4px 4px 0;
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    text-shadow:#d8d8d8 0px 1px 1px;
    }
ul#css3menu li.toplast:hover>a{
    line-height:16px;
    text-shadow:#3d3d3d 0px -1px 1px;
    }


THEN the file dropmenu.cfm

<!---<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">--->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!---<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">--->
<html>
<head>


<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript">
    function visibilite(thingId)
    {
        var targetElement = document.getElementById(thingId);
        var targetElementDisplay = targetElement.style.display;
       
        document.getElementById('Necklaces').style.display = "none";
        document.getElementById('Bracelets').style.display = "none";
        document.getElementById('Rings').style.display = "none";
        document.getElementById('Accessories').style.display = "none";
        document.getElementById('Earrings').style.display = "none";
        document.getElementById('Body jewellery').style.display = "none";
        document.getElementById('Anklets').style.display = "none";
        document.getElementById('Hairwear').style.display = "none";
        document.getElementById('Components').style.display = "none";
        document.getElementById('Charms').style.display = "none";
        document.getElementById('Displays').style.display = "none";
       
        if (targetElementDisplay == "none")
        {
            targetElement.style.display = "block";
            targetElement.style.cursor = "hand";
        }
        else
        {
            targetElement.style.display = "none";
            targetElement.style.cursor = "pointer";
        }
    }
</script>
<![endif]-->


<!---<script type="text/javascript" language="javascript" src="https://www.joe-cool.co.uk/jquery-1.4.2.min.js"></script>
<script>
     jQuery.noConflict();
</script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="https://www.joe-cool.co.uk/selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="https://www.joe-cool.co.uk/joecoolstyles.css" /></noscript>
<![endif]-->
<cfif HTTP_USER_AGENT contains "MSIE" OR Session.email EQ "yves@joe-cool.co.uk" OR Session.email EQ "vincent@joe-cool.co.uk"><script type="text/javascript">
    if (jQuery) {  
        alert('loaded');
    }</script>
</cfif>--->
<!---<!--[if gt IE 5.0]>
<style type="text/css">
/* that IE 5+ conditional comment makes this only visible in IE 5+ */
ul#css3menu li:hover> {  /* the behaviour to mimic the li:hover rules in IE 5+ */
  behavior: url( ie.htc );
}
ul.makeMenu ul {  /* copy of above declaration without the > selector, except left position is wrong */
  display: none; position: absolute; top: 2px; left: 78px;
}
</style>
<![endif]><![endif]-->
</style>--->


<cfif HTTP_USER_AGENT contains "MSIE">
    [if (gte IE 6)&(lte IE 8)]><!--COMMENTED BY YVD-->
      <link rel="stylesheet" href="../dropmenu_files/styleIE.css" />
    <![endif]
    <!--[if (lt IE 6)|(gt IE 8)]>
      <link rel="stylesheet" href="../dropmenu_files/style.css" />
    <![endif]-->
<cfelse>
    <link rel="stylesheet" href="../dropmenu_files/style.css" type="text/css" />
</cfif>

<style>a img {border:none}</style>
</head>


<body><form id="dropM" name="dropM">
<cfparam name="Session.sortby" default="highestPrice">
<cfparam name="Session.page" default="1">
<cfparam name="Session.ItemDisplayed" default="12">

<table width="900" align="center">
  <tr>
    <td width="79" align="center"><a href="../../EN/products/products_cats.cfm?catname=All necklaces&rngname=all&items=12&page=1&sortby=<cfoutput>#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All necklaces"><img src="../../graphics/iconnecklace.jpg"></a></td>
    <td width="69" align="center"><a href="../../EN/products/products_cats.cfm?catname=All bracelets&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All bracelets"><img src="../../graphics/iconbracelet.jpg" width="65" height="65"></a></td>
    <td width="65" align="center"><a href="../../EN/products/products_cats.cfm?catname=All rings&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All rings"><img src="../../graphics/iconrings.jpg" width="65" height="65" alt="Joe cool Rings"></a></td>
    <td width="77" align="center"><a href="../../EN/products/products_cats.cfm?catname=All accessories&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All accessories"><img src="../../graphics/iconpurse.jpg" width="65" height="65" alt="Accessories Joe Cool"></a></td>
    <td width="65" align="center"><a href="../../EN/products/products_cats.cfm?catname=All earrings&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Earrings"><img src="../../graphics/icondropearring.jpg" width="65" height="65" alt="Earrings Joe Cool"></a></td>
    <td width="98" align="center"><a href="../../EN/products/products_cats.cfm?catname=All body jewellery&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Body jewellery"><img src="../../graphics/iconnosestud.jpg" alt="Body jewelery Joe Cool" width="65" height="65" align="center"></a></td>
    <td width="65" align="center"><a href="../../EN/products/products_results.cfm?catname=Anklet&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Anklets"><img src="../../graphics/iconanklet.jpg" alt="Anklets Joe Cool" width="65" height="65" align="center"></a></td>
    <td width="69" align="center"><a href="../../EN/products/products_cats.cfm?catname=All hairwear&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Hairwear"><img src="../../graphics/iconhairwear.jpg" width="65" height="65" alt="Hairwear Joe Cool"></a></td>
    <td width="84" align="center"><a href="../../EN/products/products_results.cfm?catname=Component&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Components"><img src="../../graphics/iconcomponent.jpg" width="65" height="65" alt="Components Joe Cool"></a></td>
    <td width="60" align="center"><a href="../../EN/products/products_cats.cfm?catname=All charms&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Charms"><img src="../../graphics/iconcharms.jpg" width="65" height="65" alt="Charms Joe Cool"></a></td>
    <td width="121" align="left"><a href="../../EN/products/products_cats.cfm?catname=All displays&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Displays"><img src="../../graphics/icondisplay.jpg" width="65" height="65" alt="Display units Joe Cool"></a></td>
  </tr>
<tr>
<td colspan="11" align="center">
<ul id="css3menu">
    <li class="topfirst"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Necklaces');"  onclick="../../EN/products/products_cats.cfm?catname=All necklaces&rngname=all&items=12&page=1&sortby=<cfoutput>#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Necklaces"><span>Necklaces</span></a>
    <ul id="Necklaces">
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All necklaces&rngname=all&items=12&page=1&sortby=<cfoutput>#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All necklaces"   >All necklaces</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=necklace&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular necklaces">Regular necklaces</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=necklace long&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Long necklaces">Long necklaces</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Necklace choker&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Choker necklaces">Choker necklaces</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Necklace chain&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Chain necklaces">Chain necklaces</a></li>
        <cfset catToEncode = "Necklace & bracelet set">
        <li><a href="../../EN/products/products_results.cfm?catname=<cfoutput>#urlEncodedFormat(catToEncode)#&rngname=all&items=#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Necklace and bracelet sets">Necklace and bracelet sets</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Necklace with pendant&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Necklaces with pendant">Necklaces with pendant</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Pendant&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Pendants">Pendants</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Bracelets');" title="Bracelets"><span>Bracelets</span></a>
    <ul id="Bracelets">
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All bracelets&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All bracelets">All bracelets</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Bracelet&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular bracelets">Regular bracelets</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Bangle&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Bangles">Bangles</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Bracelet  or anklet&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Bracelet  or anklet">Bracelet  or anklet</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Rings');" title="Rings">Rings</a>    
    <ul id="Rings">
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All rings&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All rings">All rings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Ring&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular rings">Regular rings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Ring for toes&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Rings for toes">Rings for toes</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Ring for thumbs&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Rings for thumbs">Rings for thumbs</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Accessories');" title="Accessories"><span>Accessories</span></a>
    <ul id="Accessories">
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All accessories&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All accessories">All accessories</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Purse&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Purses">Purses</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Belt&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Belts">Belts</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Bag&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Hand bags">Hand bags</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Scarves&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Scarves">Scarves</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Keyring&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Keyrings">Keyrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Tattoos&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Tattoos">Tattoos</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Jewellery box&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Jewellery boxes">Jewellery boxes</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Magnet&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Magnets">Magnets</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Wrist watch&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Wrist watches">Wrist watches</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Brooch&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Brooches">Brooches</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Clutch pin&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Clutch pins">Clutch pins</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Handbag Charm&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Handbag Charms">Handbag Charms</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Zip pull&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Zip pulls">Zip pulls</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Earrings');" title="Earrings"><span>Earrings</span></a>
    <ul id="Earrings">
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All earrings&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All earrings">All earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring drop&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Drop earrings">Drop earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring stud&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Stud earrings">Stud earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring hoop&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Hoop earrings">Hoop earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring pin&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Pin earrings">Pin earrings</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring stud  drop&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Earring stud drop">Earrings stud drop</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Earring clip&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Earring clip">Earrings clip</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Body jewellery');" title="Body jewellery"><span>Body jewellery</span></a>
    <ul id="Body jewellery">
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All body jewellery&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All body jewellery">All body jewellery</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Body jewellery&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular body jewellery">Regular body jewellery</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Belly jewellery&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Belly jewellery">Belly jewellery</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Nose stud&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Nose studs">Nose studs</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Nose or ear stud&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Nose or ear studs">Nose or ear studs</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Anklets');" title="Anklets">Anklets</a>
    <ul id="Anklets">
        <li class="subfirst"><a href="../../EN/products/products_results.cfm?catname=Anklet&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All anklets">All anklets</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Hairwear');" title="Hairwear"><span>Hairwear</span></a>
    <ul id="Hairwear">
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All hairwear&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All hairwear">All hairwear</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Hairwear&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular Hairwear">Regular Hairwear</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Hairpin&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Hairpins">Hairpins</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Components');" title="Components">Components</a>
    <ul id="Components">
        <li class="subfirst"><a href="../../EN/products/products_results.cfm?catname=Component&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All components">All components</a></li>
    </ul>
    </li>
    <li class="topitem"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Charms');" title="Charms"><span>Charms</span></a>
    <ul id="Charms">
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All charms&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All charms">All charms</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Charms&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Regular charms">Regular charms</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Phone charm&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Phone charms">Phone charms</a></li>
    </ul>
    </li>
    <li class="toplast"><a href="JavaScript:void(0);" onMouseOver="JavaScript:visibilite('Displays');" title="Displays">Displays</a>
    <ul id="Displays">
        <li class="subfirst"><a href="../../EN/products/products_cats.cfm?catname=All displays&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="All displays">All displays</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Display stand&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Display stands">Display stands</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Display aid&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Display aid">Display aid</a></li>
        <li><a href="../../EN/products/products_results.cfm?catname=Gift packaging&rngname=all&items=<cfoutput>#urlEncodedFormat(Session.ItemDisplayed)#&page=1&sortby=#urlEncodedFormat(Session.sortBy)#</cfoutput>" title="Gift packaging">Gift packaging</a></li>
    </ul>
    </li>
</ul>
<!---<p><a href="http://css3menu.com/">Expandable CSS Menu Css3Menu.com</a></p>--->
</td></tr></table>
</form>

</body>
</html>
   



I hope this helps. The thing is nearly working, just placing that is wrong.

Adam.
imantasCommented:
Are you sure that when the document is loaded there is no single tag before <!DOCTYPE...>? Sorry for my action, but I went to the address I found in your code and chose the 'Visitor - Enter' option. Menu didn't work on my IEs. What did I do? I saved the exact copy on my computer (nothing changed) then tested - still doesn't work on IEs. Then I removed '<META' tags that server puts at the start of document. So the document started with '<!DOCTYPE...' and nothing else before it. It worked! Now menu works in IE8, IE7.. <meta> tags must be declared inside <head> not inside nothing. I hope you understood.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
adam1hAuthor Commented:
Hey Imantas,

That is good news !

The page is built invoking 3 different page, the first is topbuts, then the dropmenu, then the 'inside' page

We will try your tip and see what it does right now...Finger crossed, and many thanks

Adam
adam1hAuthor Commented:
Oki, I see what you mean Imantas.

This is added in the application, due to the pages that need to be refreshed all the time, or the content of the shopping basket is wrong as the page doesn't reload when you press back, if this makes sense

YOU ARE RIGHT IT WORKKKKKKKSSSSS

it is placed properly now

God, you are a star. Fixingh the rollover system now.

A zillion thanks Imantas

Really, that's nearly 2 months we were trying to figure out what it was and it is now a pure succes.

Again, many thanks

Adam.
adam1hAuthor Commented:
Imantas is a star.
imantasCommented:
Thanks! I'm glad it helped!
adam1hAuthor Commented:
However I'm still puzzeld why some hover works and some aren't.

Same for all browser, needs to hover twice to get it working, or sometimes it does the rollover effect on the sub menu word, sometimes it doesn't.

Quite strange.

Adam.


adam1hAuthor Commented:
hey Imantas,,ALl fine now, again, thanks for your input.

Adam.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.