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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop down menu not working in IE7

    Greetings, I wrote from scratch this centered horizontal drop down menu with centered horizontal sub menu. It's working everywhere except for IE7. Any idea why?

    http://bryanharley.com/test.html


    I thought I might have narrowed it down to this:

    Code:
    .nav ul li:hover ul{
    	position: absolute;
    	display: block; 
    }
    That piece makes the subnav appear. It formats correctly everywhere except in IE7. In IE7 the subnav just lines up along the top nav element instead of appearing below it. If I change it to:

    Code:
    .nav ul li:hover ul{
    	position: absolute;
    	display: inline; 
    }
    Then it replicates the incorrect formatting in all browsers. So does this mean IE7 doesn't understand display:block; or it's showing it as display:inline;? Why? Or am I wrong? How can I fix this?

    Someone else suggested position:absolute; might be the problem, but if I change it to position:relative; then the whole thing goes wonky, see:
    http://bryanharley.com/test2.html

  • #2
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alternatively, I tried using left:-999%; and left:auto; to hide and show the second level UL, but that's producing the same results in IE7. You can see that here: http://www.bryanharley.com/test1.html.

  • #3
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nevermind! Got it!

    Added position relative to .nav ul. Replaced margin-top and margin-left with top and left on .nav ul li ul.


  •  

    Posting Permissions

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