HTML Menu Rollover

  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Ogden, Utah

Post 3+ Months Ago

Hey There,

My systems team at the library keep having issues in IE with our HTML Menu. The tabs are coming out alright and where they are supposed to, however, when you go to roll the moue down, the tabs disappear.

Anyone have any ideas how we could fix this? If you do, I would be eternally grateful. This page has been such a headache:

http://library.weber.edu/

Thanks,

Britt
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • prateekshawebdesign
  • Newbie
  • Newbie
  • prateekshawebdesign
  • Posts: 10
  • Loc: India

Post 3+ Months Ago

works fine in IE 8...
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Well after looking at the page I'm a little confused why it works in firefox but here's the problem. Your using the link <a> to create the rollover and there aren't any classes associated with the individual items so you can't target just one (your getting the same action for each <a></a> in the flyout and the main menu). So basically if you can move your mouse fast enough you can get to another a before the menu closes.

So the solution is to use the <li> as the hover trigger. Since the submenu is inside the <li> you will remain in a hovered state even if your mouse is over the submenu items.

Example HTML (notice the use of additional classes as hooks)
Code: [ Select ]
<ul class="mainMenu">
    <li class="mainMenuItem">
        <a>Main Item Name 1</a>
        <!-- Sub menu for item 1 -->
        <ul class="subMenu">
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
        </ul>
    </li>
    <li class="mainMenuItem">
        <a>Main Item Name 2</a>
        <!-- Sub menu for item 2 -->
        <ul class="subMenu">
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
            <li class="subMenuItem"><a>Sub Menu Link</a></li>
        </ul>
    </li>
</ul>
  1. <ul class="mainMenu">
  2.     <li class="mainMenuItem">
  3.         <a>Main Item Name 1</a>
  4.         <!-- Sub menu for item 1 -->
  5.         <ul class="subMenu">
  6.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  7.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  8.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  9.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  10.         </ul>
  11.     </li>
  12.     <li class="mainMenuItem">
  13.         <a>Main Item Name 2</a>
  14.         <!-- Sub menu for item 2 -->
  15.         <ul class="subMenu">
  16.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  17.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  18.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  19.             <li class="subMenuItem"><a>Sub Menu Link</a></li>
  20.         </ul>
  21.     </li>
  22. </ul>

and the CSS
Code: [ Select ]
/* hide sub menu items - you'll have to add other styles for position etc */
ul.mainMenu li.mainMenuItem ul.subMenu{
    display:none;
}
/* set hover to display subnav */
ul.mainMenu li.mainMenuItem:hover ul.subMenu{
    display:block;
}
  1. /* hide sub menu items - you'll have to add other styles for position etc */
  2. ul.mainMenu li.mainMenuItem ul.subMenu{
  3.     display:none;
  4. }
  5. /* set hover to display subnav */
  6. ul.mainMenu li.mainMenuItem:hover ul.subMenu{
  7.     display:block;
  8. }


Now one thing to keep in mind is that IE6 doesn't support the :hover on anything other than an <a> so since your using a li:hover in the css you'll need to use javascript to support IE6
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Ogden, Utah

Post 3+ Months Ago

Thanks, I'll give this a shot ;0)
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Posts: 32
  • Loc: Ogden, Utah

Post 3+ Months Ago

Okay, so I tried using the Submenu script suggested and no such luck. Does anyone know why IE7 has such horrible issues with these kind of things but not IE8?

Do you think adding an iframe might help?

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 71 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.