Question

我有一个问题设置示例here.

我必须设置一些li来显示：inline，以便它们可以出现在同一行，但现在我需要向它们添加下拉列表，并且下拉列表发生在另一侧我想要的页面。我是否必须以不同的方式定位我原来的李？

Answer 1

请注意，如果您想在锚标记以外的任何内容中使用:hover类，请忘记在IE6中使用它，并确保其他浏览器具有正确的DOCTYPE

尝试用以下方法替换CSS的相关部分：

li
{
    display: inline;
}

ul.level_1 li
{
    position: relative;
}

ul.level_1 ul
{
    position: absolute;
    visibility: hidden;
}

li:hover ul
{
    position: absolute;
    right: 0;
    visibility: visible;
    width: 300px;
}

基本上隐藏子级列表，直到将鼠标悬停在父列表项节点上。

将父列表项节点设置为position:relative意味着如果将任何子节点设置为position:absolute，则它将相对于浏览器窗口而不是父列表项进行设置。这将使它们直接显示在您悬停的列表项下方，而不是显示在窗口的另一侧。

添加宽度以使子级列表显示为一行而不是一列。

Answer 2

我不确定您是要尝试将顶部菜单向左移动，还是向右移动子菜单，因此无论如何我都会提出解决方案。

如果您希望主菜单项显示在左侧，则需要删除或更改text-align: right css中的body。

如果您希望子菜单显示在右侧，那么因为您的<ul>绝对定位，您应该更改此规则：

    li:hover ul
    {
        left: auto;
    }

到此：

    li:hover ul
    {
        right: 0;
    }

多行列表上的下拉菜单

2 个答案: