Back To Website Design Forum

HTML Menu Rollover

  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post December 15th, 2008, 12:13 pm

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 15th, 2008, 12:13 pm

  • prateekshawebdesign
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Nov 26, 2008
  • Posts: 10
  • Loc: India
  • Status: Offline

Post December 17th, 2008, 11:47 am

works fine in IE 8...
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post December 17th, 2008, 12:20 pm

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
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post December 18th, 2008, 2:25 pm

Thanks, I'll give this a shot ;0)
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post December 19th, 2008, 3:17 pm

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?

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 116 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.