ドロップダウンメニューを作りたかった

かしこ 19views 更新:2016年9月5日

よくあるドロップダウンメニューを作りたくて、いろいろ参考にさせていただきながら作業

■ html

<ul id="main_menu_list">
    <li class="large_menu">メニュー1
        <ul class="minor_list">
            <li class="minor_menu">サブメニュー1</li>
            <li class="minor_menu">サブメニュー2</li>
            <li class="minor_menu">サブメニュー3</li>
            <li class="minor_menu">サブメニュー4</li>
        </ul>
    </li>
    <li class="large_menu">メニュー2
        <ul class="minor_list">
            <li class="minor_menu">サブメニュー1</li>
            <li class="minor_menu">サブメニュー2</li>
            <li class="minor_menu">サブメニュー3</li>
            <li class="minor_menu">サブメニュー4</li>
        </ul>
    </li>
    <li class="large_menu">メニュー3
        <ul class="minor_list">
            <li class="minor_menu">サブメニュー1</li>
            <li class="minor_menu">サブメニュー2</li>
            <li class="minor_menu">サブメニュー3</li>
            <li class="minor_menu">サブメニュー4</li>
        </ul>
    </li>
</ul>

■ css

.large_menu, .minor_menu
{
    width : 150px ;
    text-align : center ;
    list-style-type : none ;
}
.large_menu
{
    float: left ;
    background-color : #888888 ;
}
.minor_menu
{
    background-color : #CCCCCC ;
}
.minor_menu:hover
{
    background-color : #AAAAAA ;
}
.large_menu .minor_list
{
    display : none ;
}
.large_menu:hover
{
    background-color : #666666 ;
}
.large_menu:hover .minor_list
{
    display : block ;
    margin-left : 0 ;
    padding-left : 0 ;
}

今のところ最低限な感じです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません