居中悬停菜单对应的水平子菜单答案

【问题标题】：center the horizontal sub menu corresponding to the menu hovered居中悬停菜单对应的水平子菜单
【发布时间】：2013-12-04 05:23:53
【问题描述】：

我创建了一个水平子菜单

http://www.theawesomecoder.com/lifecloud/

但它总是左对齐，我想从它悬停的菜单中居中

菜单的左右两端应与悬停的菜单等距

目前我正在使用此代码：

ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 970px;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background:#000;
}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 ; }
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    width: 970px;
    background: #1376c9;
    color: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>

<ul id="topnav">
    <li><a href="">Home</a></li>
    <li>
        <a href="">About</a>
        <span>
            <a href="">The Company</a> |
            <a href="">The Team</a> |
            <a href="">Careers</a>
        </span>
    </li>
    <li>
        <a href="">Services</a>
        <span>
            <a href="">What We Do</a> |
            <a href="">Our Process</a> |
            <a href="">Testimonials</a>
        </span>
    </li>
    <li>
        <a href="">Portfolio</a>
        <span>
            <a href="">Web Design</a> |
            <a href="">Development</a> |
           <!-- <a href="">Identity</a> |
            <a href="">SEO &amp; Internet Marketing</a> |
            <a href="">Print Design</a>-->
        </span>
    </li>
    <li><a href="">Contact</a></li>
</ul>

【问题讨论】：

标签： css hover submenu

【解决方案1】：

您有一个position:absolute;，但没有对应的父级具有position:relative;。如果您按以下方式添加它，您的问题将得到解决。

这是你需要做的。

.navbar .nav > li {
    display: block;
    float: right;
    margin: 0 0 0 10px;
    padding: 0;
    position: relative;
}

其次，要使其位于中心，请添加以下内容。

.navbar .nav li span {
    color: #0000CC;
    display: none;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    left: -90px;
    padding: 15px 0;
    position: absolute;
    top: 45px;
    width: 970px;
}

希望这会有所帮助。

【讨论】：