0

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は、サブメニューがあっても同じ行に配置する必要があります。これを達成するために何ができますか？

4

1 に答える 1

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;
}
于 2012-10-18T14:17:18.537 に答える