468,107 Members | 1,324 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

menu hover problem

omerbutt
638 512MB
hi every one i have a menu li and ul based the problem is when any specific category in the li is hovered the li or the sub-cat items appear but as i move my mouse over the sub-cat or level two li it disappears can any one help in this
here is the link you can watch the left menu here link
here is the code
Expand|Select|Wrap|Line Numbers
  1. var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
  2. function buildsubmenus(){
  3. for (var i=0; i<menuids.length; i++){
  4.   var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
  5.     for (var t=0; t<ultags.length; t++){
  6.     ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
  7.         if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
  8.             ultags[t].style.left=(ultags[t].parentNode.offsetWidth-2)+"px" //dynamically position first level submenus to be width of main menu item
  9.         else //else if this is a sub level submenu (ul)
  10.           ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
  11.     ultags[t].parentNode.onmouseover=function(){
  12.     this.getElementsByTagName("ul")[0].style.display="block"
  13.     }
  14.     ultags[t].parentNode.onmouseout=function(){
  15.     this.getElementsByTagName("ul")[0].style.display="none"
  16.     }
  17.     }
  18.         for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  19.         ultags[t].style.visibility="visible"
  20.         ultags[t].style.display="none"
  21.         }
  22.   }
  23. }
  24. if (window.addEventListener)
  25. window.addEventListener("load", buildsubmenus, false)
  26. else if (window.attachEvent)
  27. window.attachEvent("onload", buildsubmenus)
  28.  
Expand|Select|Wrap|Line Numbers
  1. <?
  2. function createMenu($parId){
  3.     $q="select 
  4.         c.cat_id,
  5.         c.parent_id,
  6.         cd.cat_name
  7.     from
  8.         ".CATEGORY." c,
  9.         ".CATEGORY_DESCRIPTION." cd
  10.     where
  11.         (c.cat_id=cd.cat_id)
  12.     and
  13.         (c.parent_id='$parId')";
  14.     $r=execute($q);
  15.     while($row_cat=mysql_fetch_array($r)){
  16.         $q_s="select c.cat_id, cd.cat_name from ".CATEGORY." c, ".CATEGORY_DESCRIPTION." cd where (c.cat_id=cd.cat_id) and c.parent_id='$row_cat[cat_id]'";
  17.         $r_s=execute($q_s);
  18.         $noRows=mysql_num_rows($r_s);
  19.         if($noRows > 0){?>
  20.             <li><a href="products.php?bingo=<?php echo $row_cat['cat_id'];?>" class='WhiteNormal'>&nbsp;&nbsp;&nbsp;<strong>></strong><?php echo "&nbsp;&nbsp;".$row_cat['cat_name'];?></a>
  21.                 <ul>
  22.                     <?php createMenu($row_cat['cat_id']);?>
  23.                 </ul>
  24.             </li>
  25.         <?php }else{?>
  26.             <li><a href="products.php?bingo=<?php echo $row_cat['cat_id'];?>" class='WhiteNormal'><?php echo "&nbsp;&nbsp;".$row_cat['cat_name'];?></a></li><?php 
  27.         }
  28.     }//end while
  29. }?>
  30. <tr>
  31.     <td align="center" valign="middle">
  32.         <table cellspacing="0" cellpadding="0" border="0" align="center" width="230" class="menuHeader_left_top ">
  33.             <tr>
  34.                 <td align="right" valign="middle" width="40"><img src="images/img-019.png" width="11" height="11" border="0" align="middle" alt="none" /></td>
  35.                 <td align="left" valign="middle" class="text_14_grey_dark_bold arrow_bg">&nbsp;&nbsp;CATEGORY</td>
  36.             </tr>
  37.         </table>
  38.     </td>
  39. </tr>
  40. <tr>
  41.     <td align="center" valign="middle">
  42.         <table cellspacing="0" cellpadding="0" align="center" width="234">
  43.             <tr>
  44.                 <td align="center" valign="middle">
  45.                     <table cellspacing="0" cellpadding="0" border="0" align="center" width="234">
  46.                          <tr>
  47.                             <td align="left" valign="middle" width="234">
  48.                                 <div class="suckerdiv">
  49.                                 <ul id="suckertree1">
  50.                                 <?php             
  51.                                     createMenu(0);
  52.                                 ?>
  53.                                 </ul>
  54.                                 </div>
  55.                             </td>
  56.                         </tr>
  57.                     </table>
  58.                 </td>
  59.             </tr>
  60.         </table>
  61.     </td>
  62. </tr>
  63.  
Expand|Select|Wrap|Line Numbers
  1. /*SUCKER DIV MENU*/
  2. .suckerdiv ul{
  3.     font-family: Arial, Helvetica, sans-serif;
  4.       font-size: 14px;
  5.     margin: 0;
  6.     padding: 0;
  7.     list-style-type: none;
  8.     width: 234px; /* Width of Menu Items */
  9.     background: #ffffff;
  10.     z-index:1;
  11. }
  12. .suckerdiv ul li{
  13.     font-family: Arial, Helvetica, sans-serif;
  14.       font-size: 14px;
  15.     position: relative;
  16.     line-height:29px;
  17.     z-index:1;
  18. }
  19.  
  20. /*Sub level menu items */
  21. .suckerdiv ul li ul{
  22.     font-family: Arial, Helvetica, sans-serif;
  23.       font-size: 14px;
  24.     position: absolute;
  25.     visibility: hidden;
  26.     width: 234px; /*sub menu width*/
  27.     top: 0;
  28.     z-index:1;
  29.     border:1px solid #ffffff;
  30.     border-top-color:#e8e8e8;
  31.     border-bottom-color:#e8e8e8;
  32. }
  33. /* Sub level menu links style */
  34. .suckerdiv ul li a{
  35.     font-family: Arial, Helvetica, sans-serif;
  36.       font-size: 14px;
  37.     font-weight:normal;
  38.     display: block;
  39.     overflow: auto; /*force hasLayout in IE7 */
  40.     color:#191c2b;
  41.     text-decoration: none;
  42.     width:232px;
  43.     height:29px;
  44.     z-index:1;
  45.     border:1px solid #ffffff;
  46.     border-right-color:#e8e8e8;
  47.     border-left-color:#e8e8e8;
  48.     background:url(../images/img-014.png) 8px 25px no-repeat;
  49. }
  50. .suckerdiv ul li a:visited{
  51.     font-family:Arial, Helvetica, sans-serif;
  52.       font-size: 14px;
  53.     color: #333333;
  54. }
  55. .suckerdiv ul li a:hover{
  56.     font-family: Arial, Helvetica, sans-serif;
  57.       font-size: 14px;
  58.     width:234px;
  59.     height:29px;
  60.     border:1px solid #FFFFFF;
  61.     border-left-color:#e8e8e8;
  62.     /*background-color: #FF9900;background-color: #FFD89C;*/
  63. }
  64. .suckerdiv .subfolderstyle{
  65.     font-family: Arial, Helvetica, sans-serif;
  66.       font-size: 14px;
  67.     background:url(../images/img-014.png) 8px 25px no-repeat;
  68.     z-index:100;
  69. }
  70. /* Holly Hack for IE \*/
  71. * html .suckerdiv ul li { float:left; height: 1%; z-index:2000;}
  72. * html .suckerdiv ul li a { height: 1%; z-index:2000;}
  73.  
regards,
Omer Aslam
Jun 24 '09 #1

✓ answered by omerbutt

i i have found the problem it was not in this menu but i had another top menu named as lavalamp i downloaded it from here
lavalamp
it is conflicting with the left category menu is ther any option i can fix it
regards,
Omer Aslam

1 3465
omerbutt
638 512MB
i i have found the problem it was not in this menu but i had another top menu named as lavalamp i downloaded it from here
lavalamp
it is conflicting with the left category menu is ther any option i can fix it
regards,
Omer Aslam
Jun 27 '09 #2

Post your reply

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

Similar topics

4 posts views Thread by TycoonUK | last post: by
2 posts views Thread by Ravi Joshi | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.