Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drop down menus and the IE z-index problem

    Hello all,

    I'm trying to create a sliding drop-down menu that's completely vertical, meaning that both levels of navigation are aligned vertically, and the 2nd level opens over the first. This works great in all browsers - except, of course, IE, where the 2nd level opens under the 1st. I assume this is a z-index issue, but I haven't been able to solve it.

    I'm using this jquery code for the slide:
    Code:
    $(document).ready(function() {	
    	
    	$('#nav li').hover(
    		function () {
    			//show its submenu
    			$('ul', this).slideDown(100);
    
    		}, 
    		function () {
    			//hide its submenu
    			$('ul', this).slideUp(100);	
    
    		
    		}
    	);
    	
    });
    This is my css (in IE) for the nav bar:
    Code:
    .clear {clear:both} 
    
    
    
    #nav
    {
    margin:0;
    padding:0;
    list-style:none;
    padding-left:1%;
    top:0;
    bottom:20%;
    margin-bottom:10%;
    padding-bottom:1%;
    color:#777371;
    font-face:arial;
    font-size:100%;
    background:#fff;
    width:100%;
    font-weight:bold;
    }
    
    #nav li
    {
    position:relative;
    float:left;
    width:60%;
    margin:0 1px;
    padding-top:13%;
    padding-bottom:3%;
    z-index:1000;
    }
    
    
        #nav li a {
            text-decoration:none;
    color:#777371;
        }
     
        #nav li a:hover {
    color:#555555;
        }
    
    
        #nav a.selected {
            color:#555555;
        }
    
    #nav ul {
              position:absolute;
                left:0;
                display:none;
                margin:0 0 0 -1px;
                padding:0;
                list-style:none;
            }
    
    
    #nav ul li {
                width:100%;
                float:left;
                font-size:90%;
    font-weight:normal;
    background:#000;
    padding-top:4%;
    padding-left:2%;
    padding-bottom:3%;
    position:relative;
    z-index:2000;
            }
    
            #nav ul a {
                display:block; 
                height:20%;
                padding: 2% 3%;
                color:#777371;
            }
    
    
            #nav ul a:hover {
                text-decoration:none; 
    color:#555555;
            }
    
    *html #nav ul {
        margin:0 0 0 -2px;
    }
    And this is my html:
    Code:
    <ul id="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="cv.html">CV</a></li>
    
    <li><a href="#">Research</a>
    <ul>
      <li><a href="publications.html">Publications</a></li>
      <li><a href="talks.html">Talks</a></li>
    </ul>
    <div class="clear"></div>
    </li>
    
    <li><a href="#">Teaching</a>
    <ul>
      <li><a href="lectures.html">Lectures</a></li>
      <li><a href="tutorials.html">Tutorials</a></li>
    <li><a href="seminars.html">Seminars</a></li>
    </ul>
    <div class="clear"></div>
    </li>
    <li><a href="misc.html">Misc.</a></li>
    <li><a href="contact.html">Contact </a></li>
    </ul>
    <div class="clear"></div>
    Any help would be greatly appreciated. Thanks!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think this is your problem:

    Code:
    #nav li
    {
    position:relative;
    float:left;
    width:60%;
    margin:0 1px;
    padding-bottom:3%;
    z-index:1000;
    }
    This is making the li elements appear on top of the drop down ul - in FF7 as well as IE8. Try removing that z-index.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey,

    Thanks for the quick reply.
    I removed it, but the problem still persists in IE.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    What version of IE are you using?

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm using IE8.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Something else going on somewhere then because I don't see a problem in IE8. Have a look at this test page.

    Do you have a valid doctype on your page? If not that's probably the reason.
    Last edited by SB65; 10-31-2011 at 10:13 AM.

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I do have a valid doctype, but when I double checked I realized I had a IE quirks mode comment at the top of my page.
    Don't even remember putting it there, but without it the whole thing works fine. Thanks!
    Last edited by pandoradora; 10-31-2011 at 10:20 AM.


  •  

    Posting Permissions

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