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

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