CSS Pull Down Menu Text Center problem in IE
I cant figure out how to get my sub menu to align correctly in Internet Explorer when I center the Main Menu text. If I align the Main Menu text to the left the menu works fine in both Firefox and Internet Explorer. Any help would be greatly appreciated.
LINK TO PAGE WITH PROBLEM
CSS:
div.pdmenu {
padding: 25px;
}
.pdmenu ul {
margin: 0;
padding: 0 0 25px 0;
list-style-type: none;
}
.pdmenu li {
width:150px;
margin: 0 -1px 0 0;
padding: 0;
border:1px solid red;
color:white;
text-decoration:none;
background-color:black;
float:left;
text-align:center;
}
.pdmenu a {
text-decoration: none;
display: block;
color: #fff;
background-color: #000;
padding: 5px;
}
.pdmenu a:hover {
text-decoration: none;
color: #000;
background-color: red;
}
.pdmenu li ul {
display: none;
}
.pdmenu li:hover ul {
visibility: visible;
display: block;
position: absolute;
z-index: 1;
width:150px;
padding: 0;
margin: 0;
border:1px solid red;
text-align:left;
}
.pdmenu li li {
border: none;
text-align:left;
}
.pdmenu li li a {
padding: 2px 2px 2px 10px;
}
HTML:
<div class="pdmenu">
<ul>
<li><a href="#">HOME</a>
</li>
<li><a href="#">VIP SERVICES</a>
<ul>
<li><a href="#">Casino Marketing</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">Dining</a></li>
<li><a href="#">Concerts</a></li>
<li><a href="#">Corporate Events</a></li>
<li><a href="#">Exotic Car Rentals</a></li>
</ul>
</li>
<li><a href="#">NIGHTLIFE</a>
<ul>
<li><a href="#">Nightclubs</a></li>
<li><a href="#">Ultra Lounges</a></li>
<li><a href="#">After Hours</a></li>
<li><a href="#">Gentlemen's Clubs</a></li>
<li><a href="#">VIP Packages</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</li>
<li><a href="#">LIMOS</a>
</li>
<li><a href="#">ABOUT US</a>
</li>
<li><a href="#">CUSTOMER SERVICE</a>
</li>
</ul>
</div>
