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

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

1 个答案: