We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 19823
    • 5 Posts
    I have a css dropdown menu that works fine in Firefox but is having issues in IE7. In IE7 the menu appears when I hover over the link but dissapears (sometimes) as I try to navigate to the submenus.

    wayfinder snippet call:

    [/code[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &excludeDocs=`26,32,33,35,36,37,38,39,40`]] ]

    drop down menu css

    .menu { font-family: arial, sans-serif; width: 100%; position: relative; font-size: 12px; z-index: 90; height: 20px; } .menu ul li a { text-decoration: none; height: 20px; line-height: 20px; font-size: 12px; overflow: hidden; text-align: Left; width: 130px; margin: 0 0px 0 0; padding: 2px 6px; border: 0px solid #FFFFFF; background: #fff url(/assets/templates/yoursite/images/menu_bullet.gif) no-repeat 6px center; display: block; font-weight: bold; color: #333; } .menu ul li a:visited { text-decoration: none; height: 20px; line-height: 20px; font-size: 12px; overflow: hidden; text-align: Left; width: 130px; margin: 0 0px 0 0; padding: 2px 6px; border: 0px solid #FFFFFF; background: #fff url(/assets/templates/yoursite/images/menu_bullet.gif) no-repeat 6px center; display: block; font-weight: bold; color: #333; } .menu ul { padding: 0; margin: 0; list-style-type: none; } .menu ul li { float: left; margin-right: 1px; position: relative; margin-left: 0; } .menu ul li ul { display: none; } /* specific to non IE browsers */ .menu ul li:hover a { color: #000; background-color: #deecf7; } .menu ul li.last a { margin-right: 0; } .menu ul li:hover ul { display: block; position: absolute; top: 26px; left: 0; width: 100%; } .menu ul li:hover ul li a.hide { background: #fff; color: #000; } .menu ul li:hover ul li:hover a.hide { background: #deecf7; color: #000; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display: block; background: #fff; color: #000; border: 1px solid #b4d7ec; border-top-style: none; } .menu ul li:hover ul li a:hover { background: #deecf7; color: #000; } .menu ul li:hover ul li:hover ul { display: block; position: absolute; top: 0; } .menu ul li:hover ul li:hover ul.left { left: -95px; }


    drop down menu css for IE

    .menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
    .menu ul li a:hover ul li a.hide {display:none;}
    
    .menu ul li a:hover {color:#000; background: #deecf7;}
    .menu ul li a:hover ul {display:block; position:absolute; top:26px; left:0; width:100%; height: 2r0px;}
    .menu ul li a:hover ul li a.sub {background: #fff; color: #000;}
    .menu ul li a:hover ul li a {display:block; background: #fff; color:#000;
    	border: 0px solid #FFFFFF;
    	border-top-style: none;}
    .menu ul li a:hover ul li a ul {visibility:hidden;}
    .menu ul li a:hover ul li a:hover {background: #deecf7; color:#000;}
    .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:130px; top:0; color:#000;}
    .menu ul li a:hover ul li a:hover ul.left {left:-130px;}



    Please help. I have been working on this for a couple of weeks now!! huh
      • 19823
      • 5 Posts
      By the way here’s the link where the drop down menu is: http://www.williamsmemorialcme.org/newsite/
        • 1343 ☆ A M B ☆
        • 2,213 Posts
        I would suggest you start by fixing your validation errors (http://validator.w3.org/check?uri=http://www.williamsmemorialcme.org/newsite/&doctype=Inline) and then let us know and we can take another look.

        Also where did you get the code from? Does IE7 have issue on that site too?
          Patrick | Server Wrangler
          About Me: Website | Tweets |  MODX Hosting
          • 19823
          • 5 Posts
          Ok I went through all of the valadation as suggested and now my site is validated. I cannot remember where I got the code from.
            • 19823
            • 5 Posts
            Still need help with this :’(
            Seems like I have tried everything.
              • 1343 ☆ A M B ☆
              • 2,213 Posts
              If you don’t know where you got the code then I would suggest you rebuild your menu using known functional code. It will likely be quicker and should resolve the issue in other browsers such as Chrome and Safari.

              Use the menu from the multiflex (any works) or rainbow templates here (demo.amdbuilder.net), all the code is provided in download.

                Patrick | Server Wrangler
                About Me: Website | Tweets |  MODX Hosting
                • 18913
                • 654 Posts
                To my untrained eye, it would seem that IE7 is adding a small border around the main level of your menu. If you *slowly* drag the mouse down then the submenus don’t get picked up. But if you quickly pull the mouse down, you’ll get your submenus.

                Looking at it carefully seems to show a space between where the submenus start and where the top level ends. I clicked off all the padding and borders and still it remained. So I’d suspect that this is one of those special treats that IE gives us wink

                Not a solution, but hope it helps...
                MattC
                  • 19823
                  • 5 Posts
                  Thanks AMDbuilder. I will try doing that. Quick question. If I am only using the menu from one of those templates is it necessary to upload all the files?