mimi 0

Hi all,

I need help! I have created a jquery drop down menu & jquery tab elements in a page.

My problem now is: Whenever i hover my jquery drop down menu, it will hide behind the below jquery tab element. It means that the tab element will always overlap the drop down sub menu.

It works well in firefox and IE version 8 only. It does not work well in older browser IE version, e.g. IE 6/ IE 7. Can anyone guide me please?

I have tried all the methods provided but still cannot find out the solution. Both element drop down menu & tab elements are using jquery javascript. I'm not sure if both element in a page will cause the error.

I hope someone can guide me. I will post my index.html, testnav.css below.

My index.html as below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="testcss.css">
        <script charset="utf-8" type="text/javascript" src="jquery-1.4.js"></script>
        <title>HELP!</title>
    </head>
    <body>               
            <div>
                <ul class="test-menu">
                    <li class="current">
                        <a href="#a">Drop Down 1</a>
                        <ul>
                            <li class="current"><a href="#a">123</a></li>
                            <li><a href="#a">456</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#a">Drop Down 2</a>
                        <ul>
                            <li class="current"><a href="#a">ABC</a></li>
                            <li><a href="#a">DEF</a></li>
                        </ul>
                    </li>

            </div>
            <div style="clear:both;"></div>

              <div id="tab-container">
                <ul class="css-tabs">
                    <li><a href="#a">tab1</a></li>
                    <li><a href="#a">tab2</a></li>                  
                </ul>

                <div class="css-panes">
                    <div>First pane.</div>
                    <div>Second pane.</div>                   
                </div>

        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                // setup ul.tabs to work as tabs for each div directly under div.panes
                $("ul.css-tabs").tabs("div.css-panes > div");              

            });
        </script>

    </body>
</html>

AND my testcss.css file is:

.test-menu, .test-menu * {

    margin: 0;

    padding: 0;

    list-style: none;

}

.test-menu {

    line-height: 1.0em;

}

.test-menu ul {

    position: absolute;

    top: -999em;

    width: 10em; 
}

.test-menu ul li {

   width: 100%;

}


.test-menu li:hover {

    visibility: inherit;  /* fixes IE7 'sticky bug' */

}

.test-menu li {

    text-align:center;

    width: 9em;

    float: left;

    position: relative;

}

.test-menu a {

    display: block;

    position: relative;

    white-space: nowrap;        

}

.test-menu li:hover ul,

.test-menu li.sfHover ul {

    width:111px;

    left: 0;

    top: 35px; 
    z-index: 99; 

}

ul.test-menu li:hover li ul,

ul.test-menu li.sfHover li ul {

    top: -999em;

}

ul.test-menu li li:hover ul,

ul.test-menu li li.sfHover ul {

    width:111px;

    left: 10em; /* match ul width */

    top: 0;

}

ul.test-menu li li:hover li ul,

ul.test-menu li li.sfHover li ul {

    top: -999em;

}

ul.test-menu li li li:hover ul,

ul.test-menu li li li.sfHover ul {

    width:111px;

    left: 10em; /* match ul width */

    top: 0;

}



.test-menu {

    float: left;

}

.test-menu a {

    border-left:1px solid #fff;

    padding:  .96em 1em;

    text-decoration:none;

}

.test-menu a, .test-menu a:visited  { /* visited pseudo selector so IE6 applies text color*/

                                      color: #FFFFFF;

}

.test-menu li {

    background: #666666;

}

.test-menu li li {

    background: #999999;

}

.test-menu li li li {

    background: #999999;

}

.test-menu li:hover, .test-menu li.sfHover,

.test-menu a:focus, .test-menu a:hover, .test-menu a:active {

    background: #7CC144; 

    outline: 0;

}

/*** arrows **/

.test-menu a.sf-with-ul {

    padding-right: 2.25em;

    min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

    position: absolute;

    display: block;

    right: .75em;

    top: 1.05em; /* IE6 only */

    width: 10px;

    height: 10px;

    text-indent: -999em;

    overflow: hidden;

    background: url('images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator {  /* give all except IE6 the correct values */

                         top: .8em;

                         background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

    background-position: -10px -100px; /* arrow hovers for modern browsers*/

}



/* point right for anchors in subs */

.test-menu ul .sf-sub-indicator { background-position:  -10px 0; }

.test-menu ul a > .sf-sub-indicator { background-position:  0 0; }

/* apply hovers to modern browsers */

.test-menu ul a:focus > .sf-sub-indicator,

.test-menu ul a:hover > .sf-sub-indicator,

.test-menu ul a:active > .sf-sub-indicator,

.test-menu ul li:hover > a > .sf-sub-indicator,

.test-menu ul li.sfHover > a > .sf-sub-indicator {

    background-position: -10px 0; /* arrow hovers for modern browsers*/

}



/*** shadows for all but IE6 ***/

.sf-shadow ul {

    background: url('images/shadow.png') no-repeat bottom right;

    padding: 0 8px 9px 0;

    -moz-border-radius-bottomleft: 17px;

    -moz-border-radius-topright: 17px;

    -webkit-border-top-right-radius: 17px;

    -webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

    background: transparent;

}


/* get rid of those system borders being generated for A tags */

a:active {

    outline:none;

}


:focus {

    -moz-outline-style:none;

}


/* root element for tabs  */

ul.css-tabs {

    margin:0 !important;

    padding:0;

    height:30px;

    border-bottom:1px solid #666;

}


/* single tab */

ul.css-tabs li {

    float:left;

    padding:0;

    margin:0;

    list-style-type:none;

}



/* link inside the tab. uses a background image */

ul.css-tabs a {

    float:left;

    display:block;

    padding:5px 30px;

    text-decoration:none;

    border:1px solid #666;

    border-bottom:0px;

    height:18px;

    background-color:#efefef;

    color:#777;

    margin-right:2px;

    -moz-border-radius-topleft: 4px;

    -moz-border-radius-topright:4px;

    position:relative;

    top:1px;

}



ul.css-tabs a:hover {

    background-color:#F7F7F7;

    color:#333;

}



/* selected tab */

ul.css-tabs a.current {

    background-color:#ddd;

    border-bottom:2px solid #ddd;

    color:#000;

    cursor:default;

}



/* tab pane */

div.css-panes div {

    display:none;

    border:1px solid #666;

    border-width:0 1px 1px 1px;

    min-height:150px;

    padding:15px 20px;

    background-color:#ddd;

}

And you can always download the latest jquery javascript at :

http://jquery14.com/day-01/jquery-14

Appreciate a lot if someone can help me.....

4 answers

mimi 0
0
points

By the way, i solved the problem myself, basically you just need to add:

 var zIndexNumber = 1000;
                $('li').each(function() {
                $(this).css('zIndex', zIndexNumber);
                zIndexNumber -= 10;
                }); 


to the javascript function. 

It will work :) thanks.

Answered almost 7 years ago by mimi
0
points

Oh Great!

Answered almost 7 years ago by adelacreative
0
points

It would have been more usefull if you posted the link to your site. try the following: add to .test-menu ul{z-index:999 !important;} and to ul.css-tabs{position:relative !important; z-index:1 !important;}

Answered almost 7 years ago by adelacreative
mimi 0
0
points

hi, thanks for your reply. I tried, but the output still same. The JQuery drop down menu still hide behind the tab element in IE 7.... Anyone has solutions? Your help is always appreciated...

Answered almost 7 years ago by mimi
  • What is the link to your page? adelacreative almost 7 years ago