CSS 水平下拉菜单定位

发布于 2024-10-13 18:01:50 字数 2180 浏览 2 评论 0原文

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

    <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>

这是粗略的代码，只是为了展示一个示例，这是代码的实时示例。

谢谢

原文

I am trying to implement a horizontal navigation menu with a horizontal dropdown menu. I am trying to figure out how to center the horizontal dropdown text so it sits in the center of the navigation container so the user doesn't have to move the mouse far left to reach the links.

    <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>

This is rough code just to show an example, here is a live example of the code.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

土豪我们做朋友吧 2024-10-20 18:01:50

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

#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 */
}

这似乎可以解决问题。

A combination of relative-absolute positioning should do the trick. I tried adding these two rules and that seemed to work:

#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 */
}

That seems to do the trick.

回复收藏 0 原文

~没有更多了~