Chrome CSS Drop Down Menu Messed Up in IE

[domskidan]

1) Script Title: Chrome CSS Drop Down Menu (v2.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:

I made some modifications to the CSS and now it's all fudged up in ie.

Here is the URL of the problem:

http://ampevent.com/

It works perfectly in every browser except IE Usually have the opposite problem.

CSS Code:

.chromestyle{
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	z-index: 100;


}

.chromestyle:after{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	z-index: 100;

}

.chromestyle ul{
	background: url(nav_bg.jpg) no-repeat left top;
	text-align: center;
	height: 48px;
	padding-top: 15px;
	position: static;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #999999;
	margin-top: 0px;
	margin-bottom: 0px;
	z-index: 100;






}

.chromestyle ul li{
	display: inline;
	z-index: 100;



}

.chromestyle ul li a{
	color: #2D2D36;
	padding: 15px 20px 11px;
	margin: 0;
	text-decoration: none;
	font-family: Tahoma;
	font-size: 17px;
	font-weight: normal;
	font-style: normal;
	z-index: 100;


}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
	background: url(down_nav_shade.jpg) repeat-x left top;
	font-family: Tahoma;
	font-size: 17px;
	font-weight: normal;
	color: #99FF00;
	text-decoration: none;
	z-index: 100;


}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
	position:absolute;
	top: 0;
	font:normal 11px Tahoma;
	z-index:100;
	width: auto;
	visibility: hidden;
	border-top: 2px solid #999999;
	border-right: 2px solid #999999;
	border-bottom: 0 solid #999999;
	border-left: 2px solid #999999;
	background-repeat: repeat;
	margin-top: 0px;
	text-align: left;
	padding: 0px;
	color: #FFFFFF;



}


.dropmenudiv a{
	width: auto;
	border-bottom: 2px solid #999999;
	text-decoration: none;
	font-weight: bold;
	font-family: Tahoma;
	padding: 10px;
	font-size: 10px;
	color: #FFFFFF;
	background-repeat: repeat;
	display: block;
	background-image: url(bgtrans.png);
	z-index: 100;


}

* html .dropmenudiv a{
	width: 100%;
	z-index: 100;
}

.dropmenudiv a:hover{
	font-family: Tahoma;
	font-weight: bold;
	color: #99FF00;
	font-size: 10px;
	padding: 10px;
	display: block;
	background-image: url(bgtransdown.png);
	background-repeat: repeat-x;
	background-position: left top;
	z-index: 100;


}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

HTML

<div class="chromestyle" id="chromemenu">

  <ul>

    <li><a href="index.php">Home</a></li>

    <li><a href="#" rel="services">Services</a></li>

    <li><a href="#" rel="showcase">AMP Showcase</a></li>

    <li><a href="#" rel="social">Social</a></li>

    <li><a href="http://ampevent.com/blog/">Blog</a></li>

    <li><a href="#">Customers</a></li>

    <li><a href="#" rel="about">About AMP</a></li>

  </ul>

</div>



<div id="services" class="dropmenudiv" style="width: 113px;">

<a href="shell.php?dj_intro">Disc Jockey</a>

<a href="shell.php?prod">Production</a>

<a href="shell.php?epp">Audio/Visual</a>

<a href="shell.php?vp">Videography & Photography</a>

<a href="shell.php?web">Visual & Web Design</a>

<a href="shell.php?request">Request a Service</a>

</div>



                                           

<div id="showcase" class="dropmenudiv" style="width: 162px;"> <a href="shell.php?djp">Disc Jockey & Production</a> <a href="shell.php?epps">Event & Party Planning</a> <a href="shell.php?vps">Videography 

  & Photography</a> <a href="shell.php?vwds">Visual & Web Design</a> </div>



<div id="social" class="dropmenudiv" style="width: 93px;"> <a href="shell.php?facebook">Facebook</a> 

  <a href="shell.php?twitter">Twitter</a> <a href="javascript:bookmark()">Bookmark</a> </div>



<div id="about" class="dropmenudiv" style="width: 131px;">

<a href="shell.php?over">Overview</a>

<a href="shell.php?ampteam">AMP Team</a>

<a href="shell.php?mission">Mission Statement</a>

<a href="shell.php?cli">Company & Legal Information</a>

</div>

[zaffuto234]

I have never seen that happen before.

[vixonb]

hi there, try adding this:

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(down_nav_shade.jpg) repeat-x left top;
padding: 15px 20px 11px;
margin: 0;
font-family: Tahoma;
font-size: 17px;
font-weight: normal;
color: #99FF00;
text-decoration: none;

[zaffuto234]

It still does not work in ie