473,856 Members | 1,751 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Menu rollover doesn't work with IE6

6 New Member
Hello all,

I am trying to develop a roll-over menu effect on a page. It works fine with all other browsers except IE6. Can some one please help me?

Expand|Select|Wrap|Line Numbers
  1. <div class="menu-item-wrap">
  2.                     <a href="#" class="menu-item-text">
  3.                         Menu1                    
  4.                     </a>
  5.                     <div class="menu-item-divider"></div>
  6.                     <div class="clear"></div>
  7.                     <div class="submenu-wrap">                    
  8.                             <table class="menu-item-table" cellpadding="0" cellspacing="0">
  9.                                 <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 1 of Menu 1</a></td></tr>
  10.                                 <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 2</a></td></tr>
  11.                                 <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 3</a></td></tr>
  12.                                 <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 4</a></td></tr>
  13.                             </table>
  14.                     </div>                    
  15.                 </div>
  18.                 <div class="menu-item-wrap">
  19.                     <a href="#" class="menu-item-text">
  20.                         This is Menu2
  21.                     </a>
  22.                     <div class="menu-item-divider"></div>
  23.                     <div class="clear"></div>
  24.                     <div class="submenu-wrap">                    
  25.                         <table class="menu-item-table" cellpadding="0" cellspacing="0">
  26.                             <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 1 of 2</a></td></tr>
  27.                             <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">MenuItem2</a></td></tr>
  28.                             <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">MenuItem3</a></td></tr>
  29.                         </table>
  30.                     </div>                    
  31.                 </div>
  34.                 <div class="menu-item-wrap">
  35.                     <a href="#" class="menu-item-text">
  36.                         Menu3
  37.                     </a>
  38.                     <div class="menu-item-divider"></div>
  39.                     <div class="clear"></div>
  40.                     <div class="submenu-wrap">                    
  41.                         <table class="menu-item-table" cellpadding="0" cellspacing="0">
  42.                             <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">Sub Menu Item 1/3</a></td></tr>
  43.                             <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">MenuItem2</a></td></tr>
  44.                             <tr><td class="submenu-td"><a href="javascript:void();" class="submenu-link">MenuItem3</a></td></tr>                            
  45.                         </table>
  46.                     </div>                    
  47.                 </div>
Expand|Select|Wrap|Line Numbers
  1. .menu-item-wrap
  2. {
  3.     float:left;    
  4.     padding-left:5px;    
  5. }
  6. A.menu-item-text
  7. {
  8.     text-decoration:none;
  9.     color:#000000;
  10.     float:left;
  11.     padding-left:5px;
  12.     padding-right:10px;
  13. }
  14. .menu-item-divider
  15. {
  16.     width:1px;
  17.     height:30px;
  18.     background-image: url(../Images/menubar.png);
  19.     background-repeat:no-repeat;
  20.     float:left;
  21.     margin-top:-2px;    
  22. }
  23. TABLE.menu-item-table
  24. {
  25.     position:absolute;
  26.     overflow:visible;
  27.     margin-top:-3px;
  28.     margin-left:-6px;    
  29.     border-top:solid 1px #CBD1E0;        
  30. }
  31. TABLE.menu-item-table TD.submenu-td
  32. {
  33.     background-color:#EEE9A8;
  34.     border-bottom:solid 1px #CBD1E0;
  35.     border-left:solid 1px #CBD1E0;
  36.     border-right:solid 1px #CBD1E0;
  37. }
  38. A.submenu-link
  39. {
  40.     text-decoration:none;
  41.     color:#354260;
  42.     padding:2px 10px;    
  43.     display:block;
  44.     width:100%;
  45. }
  46. A:hover.submenu-link 
  47. {    
  48.     color:#354260;
  49.     display:block;
  50. }
  51. TABLE.menu-item-table TD.menu-selected-cell
  52. {
  53.     background-color:#CBD1E0;    
  54. }
  55. .submenu-wrap
  56. {
  57.     display:none;        
  58. }
  59. .submenu-wrap-show
  60. {
  61.     display:block;        
  62.     -width:300px;            
  63. }
  65. javascript:
  66. var $j = jQuery.noConflict();
  67. $j(document).ready(function(){
  69.     $j("TD.submenu-td").hover(        
  70.         function(){
  71.             $j(this).addClass("menu-selected-cell");                
  72.         },
  73.         function(){
  74.             $j(this).removeClass("menu-selected-cell");
  75.         }
  76.     );
  78.     $j(".menu-item-wrap").hover(
  79.         function(){$j("div.submenu-wrap",this).fadeIn(100); },
  80.         function(){$j("div.submenu-wrap",this).fadeOut(100);}
  81.     );
  82.     if(document.all){
  83.         $j(".menu-item-wrap").hoverClass("submenu-wrap-show");
  84.     }    
  85. });
  86. $j.fn.hoverClass = function(c){
  87.     return this.each(function(){
  88.         $j(this).hover(
  89.             function() { $j(this).addClass(c); },
  90.             function() {$j(this).removeClass(c);}
  91.         );            
  92.     });
  93. };
Thanks in advance,
Sep 18 '09 #1
2 4207
6 New Member
Oh I just solved it:

Expand|Select|Wrap|Line Numbers
  1. TABLE.menu-item-table
  2. {
  3.     position:absolute;
  4.     overflow:visible;
  5.     margin-top:-3px;
  6.     margin-left:-6px;    
  7.     border-top:solid 1px #CBD1E0;        
  8.     -width:200px;
  9. }
  10. .submenu-wrap
  11. {
  12.     display:none;        
  13.     -position:absolute;
  14. }
  15. .submenu-wrap-show
  16. {
  17.     display:block;        
  18.     width:auto;
  19. }
Sep 18 '09 #2
3,509 Recognized Expert Moderator Specialist
You really need to please use code tags around any code you place into the forums. Its a requirement.


Sep 18 '09 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

by: JesusFreak | last post by:
From: us_traveller@yahoo.com (JesusFreak) Newsgroups: microsoft.public.scripting.jscript Subject: toolbar script problem NNTP-Posting-Host: Recently, I downloaded the following beautiful script "http://javascript.internet.com/navigation/toolbar-menu.html". It works like a charm. I made my webpage in frames, where the nav-frame shows the menubar, so whenever I click a link in the menubar, it opens in the frame below. But...
by: ajay | last post by:
I have following code for a slide menu but i twiked it to work for a single level menu. Open it in a Browser to get a clear picture. I have 2 Qs 1) How to make first entry as non-link. i.e i want to make first text as Table Heading/menu category. For examle in the given menu i want to make a heading as "Comp. Languages" which won't be a link. 2) The position of this menu is absolute to the page. I want to make it absolute to the Table...
by: Mr. Clean | last post by:
Can a rolloever menu be done using only CSS, without javascript?
by: Kyle James Matthews | last post by:
Hello, I have been lurking here for a little bit (truth be told, I lurk on too many newsgroups to be truly effective). I have made a CSS rollover menu, and would like some advice. The menu is at the URL http://www.digitalovertone.com/index3.php. You will notice that the each link disappears the first time you hover over it (this is most noticable in Opera, in my experience). Each link consists of 2 images (1 for a:hover, 1 for...
by: Yuk Cheng | last post by:
<<<start index.htm>>> <html> <head> <script> function perform(action){ } </script> </head>
by: tfsmag | last post by:
Has anyone had a problem with putting a menu control into a master page in .net 2.0? I have a problem where if i just drop a menu control on a regular page the menu works fine, the submenus work perfect. But if I put that exact same code inside a master page, when i go to view one of the files that use that master page, all of the submenus are out of wack and instead of being hidden, they are at the bottom of the menu, and only go back in...
by: proplady | last post by:
I've had this menu for some time, and periodically make changes. I've made some changes now (just some menu items), and the menu will not show up on my webpages. I know it's something simple, but I just can't see it. Can anyone help? var NoOffFirstLineMenus=6; // Number of first level items var LowBgColor='white'; // Background color when mouse is not over var LowSubBgColor='99CCFF'; // Background color when mouse is not over...
by: Czechfish | last post by:
My files are located here: HTML & SWF FLA I am trying to create a multi-tier drop down menu, but I can't get it to work. Maintime line, frame 1 - loads a mc. When you rollover the mc, this drops down a list: Elementary schools, Middle, Junior High, High schools. When you roll over each of the categories, another menu is suppose to pop up. I was working on Elementary schools. When you rollover Elementary Schools the first item,...
by: mikeguy3086 | last post by:
Here is what I'm trying to achieve: I'm making a site that is basically a big slide show which is insignificant, but it has to be really minimalistic. So what I did was make an invisible button that is over the entire 900x400 rectangle. Basically what I want and as far as I got was getting it so that when you scroll over the button, the blank menu drops down. And when you scroll off it retracts and goes back up. Here is my code //this is...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.