CSSだけで作るドロップダウンメニュー

2016/12/13

CSSだけで作るドロップダウンメニュー

CSSだけで作るドロップダウンメニューです。
親メニューliにposition: relative;を効かせ相対位置に、
子メニューulにposition: absolute;を効かせ絶対位置にしています。

子メニューulにはvisibility: hidden;で見えなくし、overflow: hidden;ではみ出し防止しててあります。子メニューliにはheight: 0;で高さをなくしています。そして親メニューをhoverしたときに子メニューulにvisibility: visible;をかけて出現させ、子メニューに高さを指定してあげます。absoluteが掛かっているため、高さを指定する必要があります。
ちなみにvisibility: hidden;の代わりにdisplay:noneをかけると、要素そのものがなくなってしますのでtransitionが効かなくなります。アニメーションをかけたいならvisibilityやheight:0を組み合わせて使うべきです。

HTML

<nav class="g_nav">
    <ul class="g_nav_list ol2 clearfix">
        <li class="g_nav_hover"><a href="#"  class="change">メニュー1</a>
            <ul class="g_nav_c">
                <li><a href="#">子メニュー1</a></li>
                <li><a href="#">子メニュー2</a></li>
                <li><a href="#">子メニュー3</a></li>
                <li><a href="#">子メニュー4</a></li>
            </ul>
        </li>
        <li><a href="#">メニュー2</a></li>
        <li class="g_nav_hover">
            <a href="#">メニュー3</a>
            <ul class="g_nav_c">
                <li><a href="#">子メニュー1</a></li>
                <li><a href="#">子メニュー2</a></li>
            </ul>
        </li>
        <li  class="g_nav_hover"><a href="#">メニュー4</a>
            <ul class="g_nav_c">
                <li><a href="#">子メニュー1</a></li>
                <li><a href="#">子メニュー2</a></li>
                <li><a href="#">子メニュー3</a></li>
            </ul>
        </li>
        <li><a href="#">メニュー5</a></li>
        <li><a href="#">メニュー6</a></li>
    </ul>
</nav>

CSS

.g_nav {
    background: #fff;
    border-bottom: 1px solid #07215a
}

.g_nav_list>li {
    position: relative;
    float: left;
    width: 180px;
    text-align: center
}

.g_nav_list>li a {
    display: block;
    padding: 20px 0
}

.g_nav_list .g_nav_hover>.g_nav_c {
    overflow: hidden;
    visibility: hidden;
}

.g_nav_list .g_nav_hover>.g_nav_c li {
    height: 0;
    -webkit-transition: .2s;
    transition: .2s;
    box-sizing: border-box;
    border: none
}

.g_nav_list .g_nav_hover>.g_nav_c li:first-child {
    border-top: 1px solid #07215a
}

.g_nav_list .g_nav_hover:hover>.g_nav_c {
    visibility: visible;
    overflow: visible;
}

.g_nav_list .g_nav_hover:hover>.g_nav_c li {
    height: 66px;
    border-top: 1px solid #6b6b83;
    -webkit-transition: .2s;
    transition: .2s
}

.g_nav_c {
    position: absolute;
    width: 100%;
    top: 66px;
    left: 0;
    background: #fff;
    z-index: 10
}

.g_nav_c li {
    border-top: 1px solid #6b6b83;
    text-align: left
}

.g_nav_c li a {
    padding-left: 40px
}

デモページ