SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    0 Post(s)
    0 Thread(s)

    CSS dropdowns in IE 7 - is there a better way?

    Hey all!

    I needed to put in dropdown navigation in one of my sites, and I got em up and working in IE 6 and FF, but IE 7 isn't displaying them properly. The menus appear to the right instead of dropping down.

    I ended up creating a separate IE 7 stylesheet that repositions the menus by resetting the margins, but I'm wondering if there's a better way. I have this fear that IE 7 is going to get upgraded and then my hack will do ugly things.

    The HTML is in a typical two-tiered unordered list, and I'm using whatever:hover for IE 6 (prefer it over Suckerfish).

    Here's the CSS I used for the dropdowns:

    #p_nav { width: 770px; background-color: #EEE9BF; font: 0.9em Verdana, Arial, sans-serif; }
    #p_nav ul { padding: 0; list-style: none; background-color: #EEE9BF; }
    #p_nav li { float: left; width: 154px; background: #EEE9BF; }
    #p_nav li a { display: block; width: 134px; height: 2.4em; padding: 0.5em 10px;
    color: #080808; text-align: center; vertical-align: middle; }
    #p_nav li a:hover, #p_nav li:hover a { text-decoration: none; }
    #p_nav li ul.level2 { position: absolute; width: 154px; display: none; }
    #p_nav ul.level1 li:hover ul.level2 { display: block; }
    #p_nav li:hover ul { left: auto; }
    #p_nav ul.level2 a { height: auto; font-weight: normal; }
    #p_nav li#item1:hover, #p_nav li#item1 ul.level2 li:hover { background-color: #FFA07A; }
    #p_nav li#item2:hover, #p_nav li#item2 ul.level2 li:hover { background-color: #FFC469; }
    #p_nav li#item3:hover, #p_nav li#item3 ul.level2 li:hover { background-color: #A6D785; }
    #p_nav li#item4:hover, #p_nav li#item4 ul.level2 li:hover { background-color: #C3E4ED; }
    #p_nav li#item5:hover, #p_nav li#item5 ul.level2 li:hover { background-color: #CDAF95; }
    And here's what's in the IE 7:

    #p_nav li ul.level2 { margin: 3.4em 0 0 -154px; }
    Let me know if there's a better way. I'm sure there must be something I'm leaving out in the CSS...

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Newcastle, Australia
    0 Post(s)
    0 Thread(s)
    You are setting absolute position on the second level <ul>s, but not telling it where to go, nor what it should be positioned relative to. If you set position:relative on the top level <li>s, that will give the base co-ordinates for the absolute <ul>s to reference against, and top:3.4em;left:0; on the second level <ul>s will set their position. Should be no need for that IE7 thing then.


Posting Permissions

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