Css Menu Problem In Ie7, Works In Ff

[therschbach]

If you could go to www.dirtjournal.com and look at the far right menu, "Contest"...the first menu selection is a link. It is the only link that I have in all of my menus and it is the only one that doesn't appear correctly in IE7. It looks fine in FF. Before adding display:block to the #menubar ul li:hover ul a, it didn't have the beige background at all but instead had the <ul> background which is dark brown. Adding block to the <a> caused it to get a background down to the bottom of the text. What can I do to get it to look like it does in FF?Here is the HTML for that menu...

<li>  <img id="contestbutton" src="pictures/button6.jpg" alt="Contest">  <div class="menutop">	<ul style="width:126px;">	  <a target="_blank" href="http://www.dirtjournal.com/poll.php"><li>Vote!</li></a>	  <li id="winnersmenu">Winners		<div class="menutop">		  <ul>			<li onClick="ajaxFunction('winners09')">2009</li>			<li onClick="ajaxFunction('winners08')">2008</li>			<li onClick="ajaxFunction('winners07')">2007</li>			<li onClick="ajaxFunction('winners06')">2006</li>		  </ul>		</div>	  </li>	</ul>  </div></li>

The CSS...

#menubar{ text-align: center; clear: both; width: 797px; }#menubar img{border: none; vertical-align: middle; cursor: pointer; }.menutop{position:relative;}#menubar ul{padding: 0; margin: 0; list-style: none;}#menubar ul li{float: left;}#menubar ul li ul {display: none;}#menubar ul li ul li, #menubar ul li ul li ul li{float: none; background-color: #e2cda1; padding: 5px; border-style: solid; border-color: #48372d; border-width: 1px; cursor:pointer;}#menubar ul li:hover ul{position: absolute; display: block; background-color: #48372d;}#menubar ul li:hover ul a{display: block; text-decoration: none; color: black;}#menubar ul li:hover ul li ul{display: none;}#menubar ul li#archivesmenu:hover ul li:hover ul{display: block; position: absolute; top: -25px; left: 134px; background-color: #48372d; width: 100px;}#menubar ul li:hover ul li#winnersmenu:hover ul{display: block; position: absolute; top: -25px; left: -105px; background-color: #48372d; width: 100px;}#menubar ul li:hover ul li:hover, #menubar ul li:hover ul li:hover a, #menubar ul li:hover ul li:hover ul li:hover{background-color: #674d3d; color: #e2cda1;}

[therschbach]

Nevermind, I figured it out. I just had to put the <a> tag inside of the <li> instead of outside.

[thescientist]

actually, just because your site uses it, how do you get images that overlap items like the coins over the nav bar and the such? Are those done with floated images and whatnot? What is theory behind setting up a site like that and how do you design it? Do you make the site without the overlapping picture and then measure the site out and customize the picture specific to the site and z-float them all on top? Sorry if that wasn't explained well, but I have little knowledge on how that effect is achieved.