menu hover problem

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • omerbutt
    Contributor
    • Nov 2006
    • 638

    menu hover problem

    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'>&nbsp;&nbs p;&nbsp;<strong >></strong><?php echo "&nbsp;&nbsp;". $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 "&nbsp;&nbsp;". $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">&nbsp ;&nbsp;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
  • omerbutt
    Contributor
    • Nov 2006
    • 638

    #2
    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

    Comment

    Working...