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