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
[code=javascript]
var menuids=["suckertree 1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus() {
for (var i=0; i<menuids.lengt h; i++){
var ultags=document .getElementById (menuids[i]).getElementsBy TagName("ul")
for (var t=0; t<ultags.length ; t++){
ultags[t].parentNode.get ElementsByTagNa me("a")[0].className="sub folderstyle"
if (ultags[t].parentNode.par entNode.id==men uids[i]) //if this is a first level submenu
ultags[t].style.left=(ul tags[t].parentNode.off setWidth-2)+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ult ags[t-1].getElementsByT agName("a")[0].offsetWidth+"p x" //position menu to the right of menu item that activated it
ultags[t].parentNode.onm ouseover=functi on(){
this.getElement sByTagName("ul" )[0].style.display= "block"
}
ultags[t].parentNode.onm ouseout=functio n(){
this.getElement sByTagName("ul" )[0].style.display= "none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:no ne" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibili ty="visible"
ultags[t].style.display= "none"
}
}
}
if (window.addEven tListener)
window.addEvent Listener("load" , buildsubmenus, false)
else if (window.attachE vent)
window.attachEv ent("onload", buildsubmenus)
[/code]
[code=php]
<?
function createMenu($par Id){
$q="select
c.cat_id,
c.parent_id,
cd.cat_name
from
".CATEGORY. " c,
".CATEGORY_DESC RIPTION." cd
where
(c.cat_id=cd.ca t_id)
and
(c.parent_id='$ parId')";
$r=execute($q);
while($row_cat= mysql_fetch_arr ay($r)){
$q_s="select c.cat_id, cd.cat_name from ".CATEGORY. " c, ".CATEGORY_DESC RIPTION." cd where (c.cat_id=cd.ca t_id) and c.parent_id='$r ow_cat[cat_id]'";
$r_s=execute($q _s);
$noRows=mysql_n um_rows($r_s);
if($noRows > 0){?>
<li><a href="products. php?bingo=<?php echo $row_cat['cat_id'];?>" class='WhiteNor mal'> &nbs p; <strong >></strong><?php echo " ". $row_cat['cat_name'];?></a>
<ul>
<?php createMenu($row _cat['cat_id']);?>
</ul>
</li>
<?php }else{?>
<li><a href="products. php?bingo=<?php echo $row_cat['cat_id'];?>" class='WhiteNor mal'><?php echo " ". $row_cat['cat_name'];?></a></li><?php
}
}//end while
}?>
<tr>
<td align="center" valign="middle" >
<table cellspacing="0" cellpadding="0" border="0" align="center" width="230" class="menuHead er_left_top ">
<tr>
<td align="right" valign="middle" width="40"><img src="images/img-019.png" width="11" height="11" border="0" align="middle" alt="none" /></td>
<td align="left" valign="middle" class="text_14_ grey_dark_bold arrow_bg">  ; CATEGORY </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="middle" >
<table cellspacing="0" cellpadding="0" align="center" width="234">
<tr>
<td align="center" valign="middle" >
<table cellspacing="0" cellpadding="0" border="0" align="center" width="234">
<tr>
<td align="left" valign="middle" width="234">
<div class="suckerdi v">
<ul id="suckertree1 ">
<?php
createMenu(0);
?>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
[/code]
[code=css]
/*SUCKER DIV MENU*/
.suckerdiv ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
list-style-type: none;
width: 234px; /* Width of Menu Items */
background: #ffffff;
z-index:1;
}
.suckerdiv ul li{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
position: relative;
line-height:29px;
z-index:1;
}
/*Sub level menu items */
.suckerdiv ul li ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
position: absolute;
visibility: hidden;
width: 234px; /*sub menu width*/
top: 0;
z-index:1;
border:1px solid #ffffff;
border-top-color:#e8e8e8;
border-bottom-color:#e8e8e8;
}
/* Sub level menu links style */
.suckerdiv ul li a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:normal;
display: block;
overflow: auto; /*force hasLayout in IE7 */
color:#191c2b;
text-decoration: none;
width:232px;
height:29px;
z-index:1;
border:1px solid #ffffff;
border-right-color:#e8e8e8;
border-left-color:#e8e8e8;
background:url( ../images/img-014.png) 8px 25px no-repeat;
}
.suckerdiv ul li a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
}
.suckerdiv ul li a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width:234px;
height:29px;
border:1px solid #FFFFFF;
border-left-color:#e8e8e8;
/*background-color: #FF9900;backgro und-color: #FFD89C;*/
}
.suckerdiv .subfolderstyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background:url( ../images/img-014.png) 8px 25px no-repeat;
z-index:100;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float:left; height: 1%; z-index:2000;}
* html .suckerdiv ul li a { height: 1%; z-index:2000;}
[/code]
regards,
Omer Aslam
here is the link you can watch the left menu here link
here is the code
[code=javascript]
var menuids=["suckertree 1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus() {
for (var i=0; i<menuids.lengt h; i++){
var ultags=document .getElementById (menuids[i]).getElementsBy TagName("ul")
for (var t=0; t<ultags.length ; t++){
ultags[t].parentNode.get ElementsByTagNa me("a")[0].className="sub folderstyle"
if (ultags[t].parentNode.par entNode.id==men uids[i]) //if this is a first level submenu
ultags[t].style.left=(ul tags[t].parentNode.off setWidth-2)+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ult ags[t-1].getElementsByT agName("a")[0].offsetWidth+"p x" //position menu to the right of menu item that activated it
ultags[t].parentNode.onm ouseover=functi on(){
this.getElement sByTagName("ul" )[0].style.display= "block"
}
ultags[t].parentNode.onm ouseout=functio n(){
this.getElement sByTagName("ul" )[0].style.display= "none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:no ne" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibili ty="visible"
ultags[t].style.display= "none"
}
}
}
if (window.addEven tListener)
window.addEvent Listener("load" , buildsubmenus, false)
else if (window.attachE vent)
window.attachEv ent("onload", buildsubmenus)
[/code]
[code=php]
<?
function createMenu($par Id){
$q="select
c.cat_id,
c.parent_id,
cd.cat_name
from
".CATEGORY. " c,
".CATEGORY_DESC RIPTION." cd
where
(c.cat_id=cd.ca t_id)
and
(c.parent_id='$ parId')";
$r=execute($q);
while($row_cat= mysql_fetch_arr ay($r)){
$q_s="select c.cat_id, cd.cat_name from ".CATEGORY. " c, ".CATEGORY_DESC RIPTION." cd where (c.cat_id=cd.ca t_id) and c.parent_id='$r ow_cat[cat_id]'";
$r_s=execute($q _s);
$noRows=mysql_n um_rows($r_s);
if($noRows > 0){?>
<li><a href="products. php?bingo=<?php echo $row_cat['cat_id'];?>" class='WhiteNor mal'> &nbs p; <strong >></strong><?php echo " ". $row_cat['cat_name'];?></a>
<ul>
<?php createMenu($row _cat['cat_id']);?>
</ul>
</li>
<?php }else{?>
<li><a href="products. php?bingo=<?php echo $row_cat['cat_id'];?>" class='WhiteNor mal'><?php echo " ". $row_cat['cat_name'];?></a></li><?php
}
}//end while
}?>
<tr>
<td align="center" valign="middle" >
<table cellspacing="0" cellpadding="0" border="0" align="center" width="230" class="menuHead er_left_top ">
<tr>
<td align="right" valign="middle" width="40"><img src="images/img-019.png" width="11" height="11" border="0" align="middle" alt="none" /></td>
<td align="left" valign="middle" class="text_14_ grey_dark_bold arrow_bg">  ; CATEGORY </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="middle" >
<table cellspacing="0" cellpadding="0" align="center" width="234">
<tr>
<td align="center" valign="middle" >
<table cellspacing="0" cellpadding="0" border="0" align="center" width="234">
<tr>
<td align="left" valign="middle" width="234">
<div class="suckerdi v">
<ul id="suckertree1 ">
<?php
createMenu(0);
?>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
[/code]
[code=css]
/*SUCKER DIV MENU*/
.suckerdiv ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
list-style-type: none;
width: 234px; /* Width of Menu Items */
background: #ffffff;
z-index:1;
}
.suckerdiv ul li{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
position: relative;
line-height:29px;
z-index:1;
}
/*Sub level menu items */
.suckerdiv ul li ul{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
position: absolute;
visibility: hidden;
width: 234px; /*sub menu width*/
top: 0;
z-index:1;
border:1px solid #ffffff;
border-top-color:#e8e8e8;
border-bottom-color:#e8e8e8;
}
/* Sub level menu links style */
.suckerdiv ul li a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:normal;
display: block;
overflow: auto; /*force hasLayout in IE7 */
color:#191c2b;
text-decoration: none;
width:232px;
height:29px;
z-index:1;
border:1px solid #ffffff;
border-right-color:#e8e8e8;
border-left-color:#e8e8e8;
background:url( ../images/img-014.png) 8px 25px no-repeat;
}
.suckerdiv ul li a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
}
.suckerdiv ul li a:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width:234px;
height:29px;
border:1px solid #FFFFFF;
border-left-color:#e8e8e8;
/*background-color: #FF9900;backgro und-color: #FFD89C;*/
}
.suckerdiv .subfolderstyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background:url( ../images/img-014.png) 8px 25px no-repeat;
z-index:100;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float:left; height: 1%; z-index:2000;}
* html .suckerdiv ul li a { height: 1%; z-index:2000;}
[/code]
regards,
Omer Aslam
Comment