css ホバー时，下にメニュー表示

Posted 2021-05-13

<nav id="nav" class="g_nav">
                    <ul class="flex_box flex_between">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">BUSINESS</a>
                            <ul class="subs">
                                <li><a href="#">Link 1Link 1Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li><a href="#">Link 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">COMPANY</a>
                            <ul class="subs">
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li><a href="#">Link 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">RECRUIT</a>
                            <ul class="subs">
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li><a href="#">Link 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </nav>

/*---------- プルダウンメニュー ----------*/

#nav .subs {
    text-align-last: left;
    width: 150%;
    display: none;
    float: left;
    left: 0;
    background: #0064b4;
    padding: 20px;
    position: absolute;
    top: 100%;
}

#nav li:hover>* {
    display: block;
}

#nav li:hover {
    position: relative;
}

#nav ul .subs {
    position: absolute;
    left: 0;
}

#nav ul .subs li {
    color: #fff;
}

#nav ul .subs li a {
    display: block;
}

#nav ul .subs li:not(:last-child) a {
    margin: 0 0 15px 0;
}

#nav a {
    float: left;
    font-size: 15px;
    min-width: 60px;
    text-align: center;
}