Question

我有这个HTML代码：

<div class="cont">

<div class="header">
header
</div><!-- header -->

<div id="cssmenu">
    <ul>
        <li><a href="#"><span>LINK</span></a></li>
        <li><a href="#"><span>LINK</span></a></li>
        <li><a href="#"><span>SUB LINK</span></a>
            <ul>
                <li><a href="#"><span>LINK</span></a></li>
            </ul>
        </li>
    </ul>
</div>

</div><!-- cont -->

我的菜单有这个CSS：

#cssmenu *{
    z-index: 999;
}
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {
    width:100%;
    max-width:1000px;
    height: 50px; 
    background-color: #666666; /* main background color */
}
#cssmenu > ul > li {
    display: inline-block;
    margin-left: 15px;
    position: relative;
}
#cssmenu > ul > li > a {
    color: #FFFFFF; /* main link text color */
    font-weight:bold;
    font-size: 15px;
    line-height: 50px;
    padding: 16px 20px;
-webkit-transition: color .15s;
   -moz-transition: color .15s;
     -o-transition: color .15s;
        transition: color .15s;
}
#cssmenu > ul > li > a:hover {
    color: #ffffff; /* main link text hover color */
    background-color:#666666; /* main link background hover color */
}
#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: #666666; /*submenu link background color */
    text-align: left;
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
   -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 50px;
    visibility: visible;
}
#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
    color: #FFFFFF; /* submenu link text color */
    font-size: 13px;
    background-color: #666666; /*submenu background color (behind links) */
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
   -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
        transition: background-color .1s;
}
#cssmenu > ul > li:hover {
    background-color:#666666; /*background color that shows on the main menu link when hovering over the sub menu */
}
#cssmenu > ul > li:hover > a{
    color: #FFFFFF; /* main menu link hover text color */
}
#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    background-color:#666666;
    padding: 16px 0 20px 0;
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
     -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul {
    opacity: 1; left: 196px; 
    visibility: visible;
}

#cssmenu ul ul a:hover{
    background-color: #666666; /*submenu link hover color */
    /* color:#000000; */
}
#cssmenu > ul > li.active {
    background-color:#666666;
}

随着页面宽度变大，菜单显示在左侧。我怎样才能在标题下始终显示中心？

这是我的完整代码的小提琴：http://jsfiddle.net/Nqxe9/

Answer 1

在CSS中添加样式：

#cssmenu {
margin:0px auto;
padding: 9px 9px 0;
}

小提琴：http://jsfiddle.net/Nqxe9/5/

完美!! 完成;）

Answer 2

为li添加以下css。

#cssmenu > ul > li {
    display: inline-block;
    float: left;
    margin-left: 15px;
    position: relative;
}

您需要添加float:left

Live Demo

Answer 3

我添加了margin: 0 auto;

JSFiddle

Answer 4

我想查看标题的CSS;但是，如果你试图让它保持在标题下面，我会创建一个div来围绕标题和菜单，并将属性放到该div中心。

<div class="Container"><!-- Maybe make this class header depending on your css -->
<div class="header">
header
</div><!-- header -->

<div id="cssmenu">
<ul>
    <li><a href="#"><span>LINK</span></a></li>
    <li><a href="#"><span>LINK</span></a></li>
    <li><a href="#"><span>SUB LINK</span></a>
        <ul>
            <li><a href="#"><span>LINK</span></a></li>
        </ul>
    </li>
</ul>
</div>
</div> <!-- Close the new div here -->

菜单css菜单显示中心而不是左边

4 个答案: