Results 1 to 2 of 2

Thread: CSS flyout menu fails

  1. #1
    Join Date
    Jun 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile CSS flyout menu fails

    I am using this script @:
    css flyout menu - color blue

    For some reason when I view my page in IE 6 and IE 7 the menu will pop out but IE 6 will not accept
    the z-index property so the menu will open under the body content.
    My web page example
    Works great in IE 8 and firefox.
    I checked the website example and it works on IE 6, 7, however there isn't any body content to the right of the menu
    so the problem isn't readily apparent.

    Can anyone advise on what I can do to get IE 6 to work with z-index.
    I have seen flyout menus for years. So I know that it is possible to
    get the desired effect. Right now I am at a loss as to how to proceed.
    MY CSS CODE:
    Code:
    <style type="text/css">
    
    .sidebarmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 13px Verdana;
    width: 100%; /* Main Menu Item widths */
    border-bottom: 1px solid #ccc;
    }
     
    .sidebarmenu ul li{
    position: relative;
    }
    
    /* Top level menu links style */
    .sidebarmenu ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: white;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #778;
    border-right: 1px solid #778;
    }
    
    .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
    background-color: #012D58; /*background of tabs (default state)*/
    }
    
    .sidebarmenu ul li a:visited{
    color: white;
    }
    
    .sidebarmenu ul li a:hover{
    background-color: black;
    }
    
    /*Sub level menu items */
    .sidebarmenu ul li ul{
    position: absolute;
    width: 160px; /*Sub Menu Items width */
    top: 0;
    visibility: hidden;
    }
    
    .sidebarmenu a.subfolderstyle{
    background: url(http://www.dynamicdrive.com/cssexamples/media/right.gif) no-repeat 97% 50%;
    }
    
     
    /* Holly Hack for IE \*/
    * html .sidebarmenu ul li { float: left; height: 1%; }
    * html .sidebarmenu ul li a { height: 1%; }
    /* End */
    
    </style>
    THE JS CODE has not been edited
    Code:
    //Nested Side Bar Menu (Mar 20th, 09)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
    
    function initsidebarmenu(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
        ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
      if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
       ultags[t].style.left=ultags[t].parentNode.offsetWidth+"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=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.display="block"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none"
        }
        }
      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
      ultags[t].style.visibility="visible"
      ultags[t].style.display="none"
      }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initsidebarmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initsidebarmenu)
    Last edited by krraleigh; 08-11-2009 at 12:02 AM.

  2. #2
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    458
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Smile

    Code:
         z-index: 1;
        overflow: hidden;
        position: relative;
    try add this one in your css code

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
  •