I have some CSS code and HTML for a navigation menu but i need to be centered in the page but it just seems to be going to the left all the time no matter what i do.CSS Code:\[code\] ul#css3menu_top,ul#css3menu_top ul { margin:0 auto 0 auto; list-style:none; padding:0;}ul#css3menu_top,ul#css3menu_top .submenu { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}ul#css3menu_top .submenu { visibility:hidden; position:absolute; left:0; top:100%; opacity:0; -moz-transition:all 0.5s; -webkit-transition
pacity 0.5s; -o-transitionpacity 0.5s; -moz-box-shadow:3.5px 3.5px 5px #000000; -webkit-box-shadow:3.5px 3.5px 5px #000000; box-shadow:3.5px 3.5px 5px #000000; float:left; background-color:#EEEEEE; border-width:2px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-color:#FFF; padding:0 10px 10px;}ul#css3menu_top li:hover>.submenu { visibility:visible; opacity:1;}ul#css3menu_top li { position:relative; display:block; white-space:nowrap; font-size:0; float:left;}ul#css3menu_top li:hover { z-index:1;}ul#css3menu_top ul .submenu { z-index:2; position:absolute; left:100%; top:0;}ul#css3menu_top { font-size:0; width:100%; z-index:999; position:relative; display:inline-block; zoom:1; padding:0 0%; margin:0 0%; *display:inline;}ul#css3menu_top .column { float:left;}* html ul#css3menu_top li a{ display:inline-block;}ul#css3menu_top>li { margin:0; width:14%;}ul#css3menu_top li.toplast{ width:15%;}ul#css3menu_top a:active, ul#css3menu_top a:focus { outline-style:none;}ul#css3menu_top a{ display:block; text-align:center; text-decoration:none; font:bold 16px Calibri; color:#EEEEEE; text-shadow:#FFF 0 0 1px; cursor
ointer; padding:10px 15px 6px 3px; background-color:#666666; background-repeat:repeat; background-position:0 0; height:20px;}ul#css3menu_top ul li { float:none; margin:10px 0 0;}ul#css3menu_top ul a { text-align:left; padding:4px; background-color:#EEEEEE; background-image:none; border-width:0; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; font:16px Calibri; color:#666666; text-decoration:none;}ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed { background-color:#EEEEEE; color:#666666; background-position:0 100px; text-decoration:none;}ul#css3menu_top img { border:none; vertical-align:middle; margin-right:6px;}ul#css3menu_top span { display:block; overflow:visible; background-position:right center; background-repeat:no-repeat; padding-right:0px;}ul#css3menu_top ul span { padding-right:8px;}ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed { background-color:#EEEEEE; background-image:none; color:#666666; text-decoration:none;}ul#css3menu_top li.topfirst>a { padding-left: 7px; border-width:0; border-radius:4px 0 0 4px; -moz-border-radius:4px 0 0 4px; -webkit-border-radius:4px; -webkit-border-top-right-radius:0; -webkit-border-bottom-right-radius:0;}ul#css3menu_top li.toplast>a { padding-right: 7px; border-radius:0 4px 4px 0; -moz-border-radius:0 4px 4px 0; -webkit-border-radius:0; -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px;}ul#css3menu_top ul li a:hover { color:#F36F25;}@media only screen and (max-width:900px),only screen and (max-device-width:900px){ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}@media only screen and (max-width:600px),only screen and (max-device-width:600px){ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}@media only screen and (max-width:450px),only screen and (max-device-width:450px){ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}/*opera hack*/@media only screen and (min-width:900px){ html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{ display:table; } html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{ width:auto; float:none; display:table-cell; } html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{ width:auto; display:table-cell; }}\[/code\]HTML Code:\[code\] <?php $item_limit=4; ?><ul id="css3menu_top" class="topmenu"><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Homepage</span></a></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>About Us</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <li><a href="http://stackoverflow.com/login">Login</a></li> <li><a href="http://stackoverflow.com/contact">Contact Us</a></li> <?php $menu1="SELECT * from websitepages where pagetype = 'About' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Telecoms</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <?php $menu1="SELECT * from websitepages where pagetype = 'Telecoms' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>I.T. Support</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <?php $menu1="SELECT * from websitepages where pagetype = 'I.T. Support' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Security</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <?php $menu1="SELECT * from websitepages where pagetype = 'Security' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Networking</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <?php $menu1="SELECT * from websitepages where pagetype = 'Networking' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Online Shop</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <li><a href="http://stackoverflow.com/shop/index.php?mod=cart">Shopping Cart</a></li> <?php $menu1="SELECT * from websitepages where pagetype = 'Shop' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li></ul>\[/code\]See this fiddle: http://jsfiddle.net/charliejsford/WxJcz/there is a white background behind the menu which i need to change the colour of too.any ideas what i can do?
pacity 0.5s; -o-transitionpacity 0.5s; -moz-box-shadow:3.5px 3.5px 5px #000000; -webkit-box-shadow:3.5px 3.5px 5px #000000; box-shadow:3.5px 3.5px 5px #000000; float:left; background-color:#EEEEEE; border-width:2px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-color:#FFF; padding:0 10px 10px;}ul#css3menu_top li:hover>.submenu { visibility:visible; opacity:1;}ul#css3menu_top li { position:relative; display:block; white-space:nowrap; font-size:0; float:left;}ul#css3menu_top li:hover { z-index:1;}ul#css3menu_top ul .submenu { z-index:2; position:absolute; left:100%; top:0;}ul#css3menu_top { font-size:0; width:100%; z-index:999; position:relative; display:inline-block; zoom:1; padding:0 0%; margin:0 0%; *display:inline;}ul#css3menu_top .column { float:left;}* html ul#css3menu_top li a{ display:inline-block;}ul#css3menu_top>li { margin:0; width:14%;}ul#css3menu_top li.toplast{ width:15%;}ul#css3menu_top a:active, ul#css3menu_top a:focus { outline-style:none;}ul#css3menu_top a{ display:block; text-align:center; text-decoration:none; font:bold 16px Calibri; color:#EEEEEE; text-shadow:#FFF 0 0 1px; cursorointer; padding:10px 15px 6px 3px; background-color:#666666; background-repeat:repeat; background-position:0 0; height:20px;}ul#css3menu_top ul li { float:none; margin:10px 0 0;}ul#css3menu_top ul a { text-align:left; padding:4px; background-color:#EEEEEE; background-image:none; border-width:0; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; font:16px Calibri; color:#666666; text-decoration:none;}ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed { background-color:#EEEEEE; color:#666666; background-position:0 100px; text-decoration:none;}ul#css3menu_top img { border:none; vertical-align:middle; margin-right:6px;}ul#css3menu_top span { display:block; overflow:visible; background-position:right center; background-repeat:no-repeat; padding-right:0px;}ul#css3menu_top ul span { padding-right:8px;}ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed { background-color:#EEEEEE; background-image:none; color:#666666; text-decoration:none;}ul#css3menu_top li.topfirst>a { padding-left: 7px; border-width:0; border-radius:4px 0 0 4px; -moz-border-radius:4px 0 0 4px; -webkit-border-radius:4px; -webkit-border-top-right-radius:0; -webkit-border-bottom-right-radius:0;}ul#css3menu_top li.toplast>a { padding-right: 7px; border-radius:0 4px 4px 0; -moz-border-radius:0 4px 4px 0; -webkit-border-radius:0; -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px;}ul#css3menu_top ul li a:hover { color:#F36F25;}@media only screen and (max-width:900px),only screen and (max-device-width:900px){ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}@media only screen and (max-width:600px),only screen and (max-device-width:600px){ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}@media only screen and (max-width:450px),only screen and (max-device-width:450px){ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}/*opera hack*/@media only screen and (min-width:900px){ html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{ display:table; } html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{ width:auto; float:none; display:table-cell; } html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{ width:auto; display:table-cell; }}\[/code\]HTML Code:\[code\] <?php $item_limit=4; ?><ul id="css3menu_top" class="topmenu"><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Homepage</span></a></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>About Us</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <li><a href="http://stackoverflow.com/login">Login</a></li> <li><a href="http://stackoverflow.com/contact">Contact Us</a></li> <?php $menu1="SELECT * from websitepages where pagetype = 'About' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Telecoms</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <?php $menu1="SELECT * from websitepages where pagetype = 'Telecoms' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>I.T. Support</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <?php $menu1="SELECT * from websitepages where pagetype = 'I.T. Support' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Security</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <?php $menu1="SELECT * from websitepages where pagetype = 'Security' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Networking</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <?php $menu1="SELECT * from websitepages where pagetype = 'Networking' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li><li class="topmenu"><a href="http://stackoverflow.com/questions/15731966/#"><span>Online Shop</span></a> <div class="submenu" style="width:338px;"> <div class="column" style="width:50%"> <ul> <li><a href="http://stackoverflow.com/shop/index.php?mod=cart">Shopping Cart</a></li> <?php $menu1="SELECT * from websitepages where pagetype = 'Shop' order by pagedesc ASC "; $menu2=mysql_query($menu1,$conn) or die(mysql_error()); $counter=0; while($menu3=mysql_fetch_array($menu2)) { $counter++; echo '<li><a href="http://stackoverflow.com/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>'; if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; } } ?> </ul> </div> </div></li></ul>\[/code\]See this fiddle: http://jsfiddle.net/charliejsford/WxJcz/there is a white background behind the menu which i need to change the colour of too.any ideas what i can do?