Question

我有一个我在purecssmenu.com上生成的菜单，我在尝试将它放在我的页面上时遇到了麻烦，这里是代码......

<!-- 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 -->

这里是html，女巫可能甚至不需要在这个贴出来但我想我会包括它..我只是希望菜单集中在我的网站内。

<!-- 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 -->

提前感谢您的时间。

Answer 1

ul.pureCssMenu,ul.pureCssMenu ul {
    margin:0 auto;
}

Answer 2

这是一个解决方案。我发现的问题是.pureCssMenu是floated left。我只是覆盖了它，所以你可以看到它发生的地方。可能更好的想法是编辑正确的css，如果你不明白让我知道，我会解释更多。同时将其包含在div (.centerme) text-align: center;

中

<强> http://jsfiddle.net/nYbcW/

.centerme{
    text-align: center;
}
ul.pureCssMenu {
    float: none !important;
    display: inline-block !important;
    text-align:center
}

Answer 3

用div围绕它然后将div居中。

<div class="table">

然后将以下内容添加到您的css

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

参见工作示例。 http://jsfiddle.net/uh2Jt/3/

Answer 4

只需设置：

ul.pureCssMenu,ul.pureCssMenu ul {
    margin:0 auto;
}

不起作用，因为看起来菜单的位置设置为absolute。您可以将它放在包装器div中，而不是弄乱菜单的代码：

<div class="menuWrapper">
    all the html for the menu
</div>

然后使用这个CSS，无论宽度适合你：

.menuWrapper{
    margin: 0 auto;
    width: 400px;
}

点击此处的示例：http://jsfiddle.net/mCmfU/

Answer 5

这是最简单的：

ul.pureCssMenu,ul.pureCssMenu ul {
    margin:0 auto;
    float: none;
    height: 25px;
    width: 25%;
}

根据需要调整宽度和高度。

注意：您可以将这段代码添加到样式的底部，这样您就不必费心去搜索它了。

试图集中在purecssmenu.com上制作的CSS菜单

5 个答案: