Results 1 to 4 of 4

Thread: Drop-down menu hidden behind .js slideshow script

  1. #1
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop-down menu hidden behind .js slideshow script

    Hi, I'm using jQuery and CSS to do this and tried nowrap and z-index. Did not work. I've copied the code from this site jquery muliti-level CSS menu#2. Except this, this works great. please help. Please see the code below.
    ------------
    Code:
      .jqueryslidemenu{
    font: bold 12px Verdana;
    background: #414141;
    width: 100%;
    }
    
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: #414141; /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
    }
    
    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    
    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }
    
    .jqueryslidemenu ul li a:hover{
    background: black; /*tab link background during hover state*/
    color: white;
    }
    	
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }
    
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }
    
    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #eff9ff;
    color: black;
    }
    Last edited by ddadmin; 07-14-2011 at 08:53 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Try adding the code in red to the menu's CSS code:

    Code:
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    position:relative;
    z-index:10000;
    }
    If that doesn't work, please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

  3. #3
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile dd smoothmenu firefox 5.1 Mac

    Hey,

    Kudos to the person who gave this tip.

    .ddsmoothmenu ul{
    z-index:1000;/*you changed this from 100 to 1000 on 7-15-2011*/
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    And it brought back the drop down menus. Yay.

    Thanks.

    site: www.aenational.com

  4. #4
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much for admin for trying to help me. I did add the suggested code. Unfortunately did not work in IE8. I work in government and my site is just intranet, not accessible outside the network. I tried to attach the code and screen shot. But the site did not allow to upload more than 19 kb of file size. please help and suggest. I apprecaite your help.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •