I tried to center my drop down menu and all goes well in Chrome and Firefox but in IE it's not center

here is the code:

<ul class="dropdown dropdown-horizontal">
<li><a href="./" class="dir">Download Drivers</a>
	<ul>
		<li><a href="./">Download Drivers</a></li>
		<li><a href="./">Driver Widget</a></li>
		<li><a href="./">NVIDIA Software</a></li>
	</ul>
</li>
<li><a href="./">Shop</a></li>
<li><a href="./" class="dir">Products</a>
	<ul>
		<li><a href="./">Desktop</a></li>
		<li><a href="./">Workstation</a></li>
		<li><a href="./">Servers</a></li>
		<li><a href="./">Motherboard</a></li>
		<li><a href="./">High Performance Computing</a></li>
		<li><a href="./">Notebook</a></li>
		<li><a href="./">Mobile</a></li>
		<li><a href="./">Business</a></li>
		<li><a href="./">Apple</a></li>
		<li><a href="./">Software</a></li>
		<li><a href="./">Home Entertainment</a></li>
		<li><a href="./">Downloadable Games</a></li>
		<li><a href="./">Game Console</a></li>
		<li><a href="./">Legacy Products</a></li>
		<li><a href="./">Promotions</a></li>
		<li><a href="./">Where to Buy</a></li>
	</ul>
</li>
<li><a href="./" class="dir">Technologies</a>
	<ul>
		<li><a href="./">NVIDIA SLI</a></li>
		<li><a href="./">NVIDIA Hybrid SLI</a></li>
		<li><a href="./">ESA</a></li>
		<li><a href="./">NVIDIA PureVideo</a></li>
		<li><a href="./">CUDA</a></li>
		<li><a href="./">NVIDIA PhysX</a></li>
		<li><a href="./">MXM</a></li>
		<li><a href="./">Windows Vista</a></li>
	</ul>
</li>
<li><a href="./" class="dir">Communities</a>
	<ul>
		<li><a href="./">nZone</a></li>
		<li><a href="./">SLI Zone</a></li>
		<li><a href="./">CUDA Zone</a></li>
		<li><a href="./">Developer Zone</a></li>
		<li><a href="./">PartnerForce</a></li>
		<li><a href="./">Gelato Zone</a></li>
	</ul>
</li>
<li><a href="./" class="dir">Company Info</a>
	<ul>
		<li><a href="./">Investor Relations</a></li>
		<li><a href="./">Channel Partners</a></li>
		<li><a href="./">Contact Information</a></li>
		<li><a href="./">Corporate Milestones</a></li>
		<li><a href="./">Social Responsibility</a></li>
		<li><a href="./">Employment</a></li>
		<li><a href="./">University Relations</a></li>
		<li><a href="./">Executive Profiles</a></li>
		<li><a href="./">Corporate Awards</a></li>
	</ul>
</li>
<li><a href="./" class="dir">News</a>
	<ul>
		<li><a href="./">Press Room</a></li>
		<li><a href="./">NVISION</a></li>
		<li><a href="./">Events Calendar</a></li>
		<li><a href="./">Success Stories</a></li>
		<li><a href="./">NVIDIA in the News</a></li>
		<li><a href="./">NVIDIA Newsletter</a></li>
	</ul>
</li>
<li><a href="./">Support</a></li>
</ul>

 

Here is the CSS:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {

z-index: 597;
}

ul.dropdown li {
float: right;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}

It may depend on what your drop down menu is inside - the body or another div? How wide is the parent div or body?

 

You also need to add a width and margin: auto to the ul tag class:-

 

ul.dropdown {
z-index: 597; width: 970px; margin: 0 auto;
}

 

Choose a width that suits your li tags total.

 

Don't add the width and margin to the first style ul.dropdown,ul.dropdown li,ul.dropdown ul {...} because the li tags and nested ul tag are in that style.