Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

menu hover problem

omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 344
#1: Jun 24 '09
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
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 344
#2: Jun 27 '09

re: menu hover problem

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
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,223 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved