带有子菜单的简单菜单不起作用

Question

我正在尝试创建一个非常简单的菜单，其中包含仅使用 HTML 和 CSS（无 javascript）的子菜单。现在我有这个代码：

<ul id="main_ul>
    <li id="hover_1">Item 1
    <ul id="submenu_1>
    <li>Subitem 1</li>
    <li>Subitem 2</li>
    </ul>
    </li>
    <li id="hover_2">Item 2
    <ul id="submenu_2>
    <li>Subitem 3</li>
    <li>Subitem 4</li>
    </ul>
    </li>
</ul>

这是 CSS：

#main_ul li
{
    display:inline;
}

#submenu_1
{
    visibility:hidden;
}

#submenu_2
{
    visibility:hidden;
}

#hover_1:hover #submenu_1
{
    visibility:visible;
}

#hover_2:hover #submenu_2
{
    visibility:visible;
}

如果代码中没有子菜单，display:inline; 属性可以正常工作，但是代码中的子菜单会中断。我希望普通菜单项目 1 和 2 位于同一行，即使那里有子菜单。我该怎么做才能做到这一点？

Answer 1

有了这个 CSS 就可以了

#main_ul li
{
    display:inline;
    position:relative;
}

#submenu_1, #submenu_2
{
    display:none;
    position:absolute;
    left:0;
    width:100px;
}

#hover_1:hover #submenu_1, #hover_2:hover #submenu_2
{
    display:block;
}