드롭다운 상단 메뉴바 만들기

                                           구현된 모습                                            

    

 

1. html 코드

<header class="top-bar con-min-width">   
    <div class="con">
        <nav class="top-bar__menu-box-1">
            <ul>
                <li>
                    <a href="#">menu1</a>
                    <ul>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu2</a>
                    <ul>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu3</a>
                    <ul>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu4</a>
                    <ul>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                        <li><a href="#">text1</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>

 

2.css코드

<style>
    body, ul, li{
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a{
        color: inherit;
        text-decoration: none;
    }

    .top-bar__menu-box-1>ul ul{
        display: none;
    }

    a{
        font-style: 3rem;
    }

    .con{
        margin-left: auto;
        margin-right: auto;
    }

    :root{
        --site-width:1200px
    }
    .con-min-width{
        min-width: var(--site-width);
    }

    .top-bar>.con{
        width: var(--site-width);
    }

    .top-bar__menu-box-1>ul>li{
        display: inline-block;
    }

    .top-bar__menu-box-1{
        margin-top: 100px;
        text-align: center;
    }

    .top-bar__menu-box-1 ul{
        background-color: white;
        color: black;
    }

    .top-bar__menu-box-1 ul > li >a { 
        display: block;
        font-size: 3rem;
        padding: 10px 50px;
        border: 10px solid rgb(0, 0, 0);
    }

    .top-bar__menu-box-1 ul > li:hover >a {
        background-color: #555;
    }

    .top-bar__menu-box-1>ul>li:hover>ul{
        display: block;
    }

    .top-bar__menu-box-1>ul>li{
        position: relative;
    }

    .top-bar__menu-box-1>ul>li>ul{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
    }
</style>

주의할 점

• text-decoration 은 none으로 주어야 a태그의 밑줄이 사라진다.
• list-style 은 none으로 주어야 ul,li 태그앞의 동그라미 기호가 사라진다.
• 하위 ul이 커서를 올리기 전까지 보이지 않게 하기 위해 ul의 display : none.
• 상위 ul 내부의 li 들이 가로로 보여져야 하기 때문에 li의 display : inline-block.