CSSだけで作る横メニュー

リキッドデザイン用に作ったナビゲーション。
hoverすると子メニューが出現します。PC幅用のメニューです。
隣接セレクタの”+”を使用して、.nav_list_innerをhoverしたとき、.nav_list_innerの中にある.nav_cを表示させるようにしています。

デモページ

HTML

<div class="l_nav">
        <nav class="nav">
            <ul class="nav_menu">
                <li>
                    <div class="nav_list_inner">
                        <a href="">メニュー1</a>
                    </div>
                </li>
                <li>
                    <div class="nav_list_inner">
                        <a href="">メニュー2</a>
                    </div>
                    <ul class="nav_c pc">
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー2-1</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー2-2</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー2-3</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー2-4</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="nav_list_inner">
                        <a href="">メニュー3</a>
                    </div>
                    <ul class="nav_c pc">
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー3-1</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー3-2</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー3-3</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー3-4</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー3-4</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー3-5</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="nav_list_inner">
                        <a href="">メニュー4</a>
                    </div>
                    <ul class="nav_c pc">
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー4-1</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー4-2</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー4-3</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="nav_list_inner">
                        <a href="">メニュー5</a>
                    </div>
                    <ul class="nav_c pc">
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー5-1</a>
                            </div>
                        </li>
                        <li>
                            <div class="nav_c_inner">
                                <a href="">メニュー5-2</a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
<!-- div[l_nav] -->
<div class="l_content">

</div>

CSS

.l_nav {
    display: table-cell;
    width: 190px;
    min-width: 190px;
    height: 100%;
    left: 0;
    background: #fff;
    -webkit-transition: .3s;
    transition: .3s;
    vertical-align: top;
}
.l_nav .sp_nav_contact {
    width: 0;
    height: 0;
    padding: 0;
}
.l_nav .nav_menu {
    width: 190px;
    padding: 140px 0 0;
    z-index: 10001;
}
.l_nav .nav_menu li {
    list-style-type: none;
    border-bottom: 1px solid #ececec;
}
.l_nav .nav_menu .nav_list_inner:before {
    content: none;
}
.l_nav .nav_menu a {
    display: block;
    font-size: 1.8rem;
    padding: 10px 0 10px 15px;
    font-weight: bold;
    -webkit-transition: .3s;
    transition: .3s;
}
.l_nav .nav_menu a:hover {
    padding-left: 25px;
    color: #674498;
    background: #ececec;
    -webkit-transition: .3s;
    transition: .3s;
}
.l_nav .nav_menu .nav_contact_a {
    color: #fff;
    background: #674498;
}
.l_nav .nav_menu .nav_contact_a:hover {
    background: #b585f8;
    color: #fff;
}
.l_nav .nav_c {
    position: fixed;
    top: 0px;
    left: 190px;
    width: 0px;
    height: 100%;
    padding: 0;
    background: #ddd;
    z-index: 1;
    overflow: hidden;
    -webkit-transition: .3s;
    transition: .3s;
}
.l_nav .nav_c li {
    width: 200px;
    border-bottom: 1px solid #fff;
}
.l_nav .nav_c li:nth-child(1) {
    margin-top: 140px;
}
.l_nav .nav_c a {
    font-size: 1.4rem;
}
.l_nav .nav_c a:hover {
    background: #fff;
}
.l_nav .nav_c:hover {
    width: 200px;
    z-index: 10001;
    -webkit-transition: .3s;
    transition: .3s;
}
.l_nav .nav_list_inner:hover+.nav_c {
    width: 200px;
    z-index: 10001;
    -webkit-transition: .3s;
    transition: .3s;
}
.l_content{
    display: table-cell;
}
body{
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    margin: 0;
}

デモページ

  • コーダーのための計算機