467,075 Members | 1,032 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,075 developers. It's quick & easy.

Menu rollover doesn't work with IE6

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?

HTML:
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>
  16.  
  17.  
  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>
  32.  
  33.  
  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>
  48.  
CSS:
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. }
  64.  
  65. javascript:
  66. var $j = jQuery.noConflict();
  67. $j(document).ready(function(){
  68.  
  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.     );
  77.  
  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. };
  94.  
Thanks in advance,
DK.
Sep 18 '09 #1
  • viewed: 3886
Share:
2 Replies
Oh I just solved it:

CSS:
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. }
  20.  
Sep 18 '09 #2
numberwhun
Expert Mod 2GB
You really need to please use code tags around any code you place into the forums. Its a requirement.

Regards,

Jeff
Sep 18 '09 #3

Post your reply

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

Similar topics

4 posts views Thread by JesusFreak | last post: by
13 posts views Thread by Mr. Clean | last post: by
12 posts views Thread by Kyle James Matthews | last post: by
7 posts views Thread by tfsmag | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.