2

我有这个 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/

4

4 回答 4

4

在您的 CSS 中添加样式：

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

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

完美的！！完毕 ;）

于 2013-09-19T12:28:47.270 回答
3

为 li 添加下面的 css。

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

你需要添加float:left

现场演示

于 2013-09-19T12:24:30.563 回答
1

我添加了一个margin: 0 auto;

JSFiddle

于 2013-09-19T12:28:23.273 回答
0

我想看看你的标题的 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 -->
于 2013-09-19T12:26:26.453 回答