Question

我创建了一个横向子菜单

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>

Answer 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;
}

希望这有帮助。

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

1 个答案: