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:

Code:
#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:

Code:
#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...