메뉴바

 

    <nav class="menu">
        <ul>
            <li>
                <a href="#">1메뉴 1</a>
                <ul>
                    <li><a href="">2메뉴 1</a></li>
                    <li><a href="">2메뉴 2</a></li>
                    <li><a href="">2메뉴 3</a></li>                    
                </ul>
            </li>
            <li>
                <a href="#">1메뉴 2</a>
                <ul>
                    <li><a href="">2메뉴 1</a></li>
                    <li><a href="">2메뉴 2</a></li>
                    <li><a href="">2메뉴 3</a></li>                    
                </ul>
            </li>
            <li>
                <a href="#">1메뉴 3</a>
                <ul>
                    <li><a href="">2메뉴 1</a></li>
                    <li><a href="">2메뉴 2</a></li>
                    <li><a href="">2메뉴 3</a></li>  
                </ul>
            </li>

        </ul>
    </nav>

a{
    text-decoration: none;
    color: inherit;
}
li{
    width: 100px;
    background-color: beige;
}
.menu{
    text-align: center;
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu> ul>li{
    position: relative;
    display: block;    
}
.menu > ul > li > ul{
    position: absolute;
    display: none;
}

.menu> ul>li:hover > ul{
    display: inline-block;
    /* display: block; */
}

a{
    text-decoration: none;
    color: inherit;
}
li{
    width: 100px;
    height: 50px;
    background-color: beige;
    align-content: center;
}
.menu{
    text-align: center;  
}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu> ul>li{
    position: relative;
    display: block;
    
}
.menu > ul > li > ul{
    position: absolute;
    display: none;
    left: 100%;
    top: 0;
}

.menu> ul>li:hover > ul{
    display: inline-block;
    /* display: block; */
}