html - CSS Horizontal Dropdown定位 - Thinbug

CSS Horizontal Dropdown定位

时间：2011-01-24 06:29:12

标签： html css navigation

我正在尝试使用水平下拉菜单实现水平导航菜单。我试图弄清楚如何将水平下拉文本居中，使其位于导航容器的中心，这样用户就不必将鼠标向左移动到达链接。

    <style type="text/css">
#nav-container {
    padding: 4px;
    width: 900px;
    height: 60px;
    background: #CCC;
}
#navbar {
    margin:0;
    padding:0;
}
#navbar li {
    padding: 6px;
    display: inline;
    list-style: none;
}
#navbar li ul {
    display: none;
    position: absolute;
    margin:0;
    padding:0;
    width: 900px;
}
#navbar li:hover ul {
    display: block;
}

</style>
</head>

<body>
<div id="nav-container">
<ul id="navbar">
    <li><a href="#">Link</a>
        <ul>

            <li><a href="#">Hello</a></li>
            <li><a href="#">World</a></li>
         </ul>
    </li>
    <li><a href="#">Link</a>
        <ul>
            <li><a href="#">Peace</a></li>

            <li><a href="#">Love</a></li>
         </ul>
    </li>
    <li><a href="#">Link</a>
        <ul>
            <li><a href="#">Smiles</a></li>
            <li><a href="#">Cries</a></li>

         </ul>
    </li>
    <li><a href="#">Link</a>
        <ul>
            <li><a href="#">Homer</a></li>
            <li><a href="#">Peter</a></li>
         </ul>

    </li>
    <li><a href="#">Link</a>
        <ul>
            <li><a href="#">Giggity</a></li>
            <li><a href="#">Fapping</a></li>
         </ul>
    </li>

    <li><a href="#">Link</a>
        <ul>
            <li><a href="#">Napster</a></li>
            <li><a href="#">Myspace</a></li>
         </ul>
    </li>
</ul>
</div>

这是粗略的代码，只是为了展示一个例子，这里是代码的live example。

由于

1 个答案:

答案 0 :(得分：2)

相对绝对定位的组合应该可以解决问题。我尝试添加这两个规则，这似乎有效：

#navbar li {
    position: relative;
}

#navbar li ul {
    position: absolute;
    left: 0;
    top: 24px; /* must me same as the height of parent li +/- a couple of pixels */
}

这似乎可以解决问题。