Question

i have a menu that i generated on purecssmenu.com and im having trouble trying to center it on my page here is the code…

<!-- Start PureCSSMenu.com STYLE -->
        <style>
        #pcm{display:none;}
        ul.pureCssMenu ul{display:none}
        ul.pureCssMenu li:hover>ul{display:block}
        ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
        ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
        ul.pureCssMenu,ul.pureCssMenu ul {
            margin:0px;
            list-style:none;
            padding:0px 2px 2px 0px;
            background-color:#000000;
            background-repeat:repeat;
            border-color:#000000;
            border-width:1px;
            border-style:solid;
        }
        ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
            display:block;
            zoom:1;
            float: left;
        }
        ul.pureCssMenu ul{
            width:80.85000000000001px;
        }
        ul.pureCssMenu li{
            display:block;
            margin:2px 0px 0px 2px;
            font-size:0px;
        }
        ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
        outline-style:none;
        }
        ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
            display:block;
            vertical-align:middle;
            background-color:#000000;
            border-width:1px;
            border-color:#000000;
            border-style:solid;
            text-align:left;
            text-decoration:none;
            padding:2px 5px 2px 10px;
            _padding-left:0;
            font:11px Arial;
            color: #969696;
            text-decoration:none;
            cursor:default;
        }
        ul.pureCssMenu span{
            overflow:hidden;
        }
        ul.pureCssMenu li {
            float:left;
        }
        ul.pureCssMenu ul li {
            float:none;
        }
        ul.pureCssMenu ul a {
            text-align:left;
            white-space:nowrap;
        }
        ul.pureCssMenu li.sep{
            text-align:left;
            padding:0px;
            line-height:0;
            height:100%;
        }
        ul.pureCssMenu li.sep span{
            float:none; padding-right:0;
            width:3px;
            height:100%;
            display:inline-block;
            background-color:#cccccc #111111 #111111 #cccccc;   background-image:none;}
        ul.pureCssMenu ul li.sep span{
            width:100%;
            height:3px;
        }
        ul.pureCssMenu li:hover{
            position:relative;
        }
        ul.pureCssMenu li:hover>a{
            background-color:#000000;
            border-color:#000000;
            border-style:solid;
            font:11px Arial;
            color: #ffa500;
            text-decoration:none;
        }
        ul.pureCssMenu li a:hover{
            position:relative;
            background-color:#000000;
            border-color:#000000;
            border-style:solid;
            font:11px Arial;
            color: #ffa500;
            text-decoration:none;
        }
        ul.pureCssMenu li.dis a {
            color: #666 !important;
        }
        ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
        height:16px;
        }
        ul.pureCssMenu ul img {width:16px;
        height:16px;
        }
        ul.pureCssMenu img.over{display:none}
        ul.pureCssMenu li.dis a:hover img.over{display:none !important}
        ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
        ul.pureCssMenu li:hover > a img.def  {display:none}
        ul.pureCssMenu li:hover > a img.over {display:inline}
        ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
        ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
        ul.pureCssMenu a:hover ul{display:block}
        ul.pureCssMenu span{
            display:block;
            background-image:url(./images/arr_white.gif);
            background-position:right center;
            background-repeat: no-repeat;
           padding-right:12px;}
        ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white.gif);
        }
        ul.pureCssMenu a:hover span{    _background-image:url(./images/arrv_white.gif)}
        ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}
        </style>
<!-- End PureCSSMenu.com STYLE -->

and here is the html, witch is probably not even needed in this posted but i figure i would include it.. i just want that menu centered inside my website.

<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui"><a class="pureCssMenui" href="home.html" target="scare">home</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#">about</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>haunts</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">2009</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">2010</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">2011</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">2012</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#">studio</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>products</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">nightmares</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">hauntworks</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">atmosfears</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">frightwears</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>links</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">haunts</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">suppliers</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">resources</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#">contact</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->

thanks in advance for your time.

Answer 1

Surround it with a div and then center the div.

<div class="table">

Then add the following to your css

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

See the working example.
http://jsfiddle.net/uh2Jt/3/