Google Chrome Menu Drop down aligns to left

[shunya]

Folks,

I am working on a page and I am almost done with it however my dropdown menu works perfectly fine in IE however, it aligns to left in google chrome and Safari. Tried various google methods like margin: 0px aouto; etc none of it seems to be working. Help:confused:

My CSS file as follows.


#nav
{

margin: 0px auto;
padding: 0px;
list-style-type: none;
list-style-image: none;
}

#nav li
{

margin: 0px auto;
padding: 0px;
float: left;
}

#navTab01,
#navTab02,
#navTab03,
#navTab04,
#navTab05,
#navTab06,
#navTab07,
/*#navTab08*/
{
position: relative;
float: left;
}

a.mainNavItem,
a.mainNavItem:active,
a.mainNavItem:visited
{
float: left;
padding: 0;
height: 49px;
background-image: url(../images/structure/mainNav.jpg);
text-indent: -9999px;
font-size: 1%;
overflow: hidden;
}

#navTab01 a.mainNavItem { width: 112px; background-position: 0px 0px; }
#navTab02 a.mainNavItem { width: 125px; background-position: -112px 0px; }
#navTab03 a.mainNavItem { width: 120px; background-position: -237px 0px; }
#navTab04 a.mainNavItem { width: 131px; background-position: -357px 0px; }
#navTab05 a.mainNavItem { width: 120px; background-position: -488px 0px; }
#navTab06 a.mainNavItem { width: 111px; background-position: -608px 0px; }
#navTab07 a.mainNavItem { width: 154px; background-position: -719px 0px; }
/*#navTab08 a.mainNavItem { width: 107px; background-position: -873px 0px; }*/

#navTab01 a.mainNavItem:hover { background-position: 0px -49px; }
#navTab02 a.mainNavItem:hover { background-position: -112px -49px; }
#navTab03 a.mainNavItem:hover { background-position: -237px -49px; }
#navTab04 a.mainNavItem:hover { background-position: -357px -49px; }
#navTab05 a.mainNavItem:hover { background-position: -488px -49px; }
#navTab06 a.mainNavItem:hover { background-position: -608px -49px; }
#navTab07 a.mainNavItem:hover { background-position: -719px -49px; }
/*#navTab08 a.mainNavItem:hover { background-position: -873px -49px; }*/

#navTab01 a.current { background-position: 0px -49px; }
#navTab02 a.current { background-position: -112px -49px; }
#navTab03 a.current { background-position: -237px -49px; }
#navTab04 a.current { background-position: -357px -49px; }
#navTab05 a.current { background-position: -488px -49px; }
#navTab06 a.current { background-position: -608px -49px; }
#navTab07 a.current { background-position: -719px -49px; }
/*#navTab08 a.current { background-position: -873px -49px; }*/


/* ========== Drop-down (Level 2) Navigation ========== */

#mainNav ul.dropdown
{
display: none;
position: absolute;
margin: 0;
padding: 0;
width: 196px;
left: 0px;
top: 49px; /* Height of main navigation item */
list-style-image: none;
list-style-type: none;
border-left: solid 1px #A1A1A1;
border-right: solid 1px #A1A1A1;
z-index: 1000;
}

#mainNav ul.lastMainNavDropdown
{
left: auto; /* Required for 'right' to work */
right: 0px;
border-left: solid 1px #A1A1A1;
border-right: solid 1px #A1A1A1;
}

#mainNav ul.dropdown li
{
position: relative;
background-color: #FFF;
border-bottom: solid 1px #5E5E5E;
}

#mainNav ul.dropdown li a,
#mainNav ul.dropdown li a:active,
#mainNav ul.dropdown li a:visited
{
display: block;
padding: 10px 8px 10px 8px;
width: 180px;
background-color: #434343;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #FFF;
cursor: pointer;
}

#mainNav ul.dropdown li a:hover
{
background-color: #626262;
background-color: #545454;
color: #FFF;
}



my HTML code



<ul id="mainNav">
<ul id="nav"><li id="navTab01"><a title="Company" href="Company_overview.html" class="mainNavItem">Company</a><ul class="dropdown"><li style="z-index: -1;"><a title="Company Overview" href="Company_overview.html" class="">Company Overview</a></li></ul></li>
<li id="navTab02"><a title="Expertise" href="Expertise_storage.html" class="mainNavItem">Expertise</a><ul class="dropdown"><li style="z-index: -1;"><a title="Cloud Computing " href="Expertise_cloudcomputing.html" class="">Cloud Computing </a></li><li style="z-index: -2;"><a title="Database" href="Expertise_database.html" class="">Database</a></li><li style="z-index: -3;"><a title="Storage" href="Expertise_storage.html" class="">Storage</a></li><li style="z-index: -4;"><a title="Virtualization" href="Expertise_virtualization.html" class="">Virtualization</a></li><li style="z-index: -5;" class="last"><a title="Application Integration" href="Expertise_appsintegration.html" class="">Application Integration</a></li></ul></li>
<li id="navTab03"><a title="Consulting" href="Consulting_techoptimz.html" class="mainNavItem">Consulting</a><ul class="dropdown"><li style="z-index: -1;"><a title="Technology Optimization" href="Consulting_techoptimz.html" class="">Technology Optimization</a><li style="z-index: -2;"><a title="Strategic Sourcing" href="Consulting_sourcing.html" class="">Strategic Sourcing</a></li><li style="z-index: -3;"><a title="Education &amp; Development" href="Consulting_edutrain.html" class="">Education &amp; Development</a></li></ul></li>
<li id="navTab04"><a title="Resources" href="dm_Resources.html" class="mainNavItem">Resources</a><ul class="dropdown"><li style="z-index: -1;"><a title="Resources Overview" href="dm_Resources.html" class="">Resources Overview</a></li></ul></li>
<li id="navTab05"><a title="Partners" href="dm_partners.html" class="mainNavItem">Partners</a><ul class="dropdown"><li style="z-index: -1;"><a title="Partners" href="dm_partners.html" class="">Partners Overview</a></li></ul></li>
<li id="navTab06"><a title="Careers" href="dm_careers.html" class="mainNavItem">Careers</a><ul class="dropdown"><li style="z-index: -1;"><a title="Join the Datamach Team" href="dm_careers.html" class="last">Join the Datamach Team</a></li></ul></li>
<li id="navTab07"><a title="Contact Us" href="dm_contacts.html" class="mainNavItem">Contact Us</a><ul class="dropdown"><li style="z-index: -1;"><a title="Contact Us" href="dm_contacts.html" class="">Contact Us</a></ul></li></li></ul>

</ul>


PLEase help

[ajfmrf]

Hi shunya,please post a link to the page you are having issues with.

[shunya]

http://www.datamach.com/

[Beverleyh]

What exactly are you deeming to be correct behaviour? Please clearly explain what you would like to happen.

It appears that you do not have a valid DOCTYPE - address that and that should help to standardise the behaviour across different browsers.

Also, you link to a jQuery library but i don't see any other kind of JavaScript - should there be an additional menu plugin or in-page menu initialisation script that you have forgotten to include? If not, why include the library if you're not using it?

If this is a CSS only menu, have you followed an online tutorial or grabbed the CSS from another website? If you have, please provide the link as there may be something that you've overlooked.