CSS) 참고6_세부 검색창

CSS) 참고 7_세부 메뉴바

세부 메뉴바는 마우스를 올렸을 때 내부의 세부 요소들이 보여야 하기 때문에 이전의 세부 요소 코드들보다 조금 어렵다.

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메뉴바</title>

    <style>
        div{
            /* border: 1px solid red; */
            box-sizing: border-box;
        }
        .nevigator{
            width: 1000px;
            height: 40px;
        }
        #nevi{
            /* border: 1px solid blue; */
            list-style-type: none;
            margin: 0;
            padding: 0;
            /*
                ul 요소는 기본적으로 위, 아래 margin이 존재.
                ul 요소에 padding도 존재함.
                여백 관련 모든 요소가 왼쪽에 달라 붙을 것.
            */
            height: 100%;
        }
        #nevi>li {
            /* border: 1px solid blue; */
            float: left;
            width: 15%;
            height: 100%;
            text-align: center;
            
        }

        #nevi a{
            /* border: 1px solid green; */
            text-decoration: none;
            color: cornflowerblue;
            font-size: 17px;
            font-weight: 900;

            width: 100%;
            height: 100%;

            display: block;
            /* 
                a 태그는 인라인 요소이기 때문에 width, height 속성이
                적용되지 않아서, 블럭 요소로 변경해야 한다.
            */

            /* vertical-align: middle;  
                
                vertical-align 속성은 inline 요소에만 적용 가능
            */
            line-height: 35px;
            /*
                블럭요소의 새로길이만큼 크기를 부여하면 자동으로 가운데로 옴
            */
        }

        #nevi a:hover{
            font-size: 18px;
            color: coral;
        }

        #nevi>li>ul{
            list-style-type: none;
            padding: 0;
            display: none;
        }

        #nevi>li>ul a{
            font-size: 14px;
        }

        #nevi>li>ul a:hover{
            font-size: 15px;
        }

        /* 아이디가 nevi인 요소의 자손 중 li의 자손 중 a태그에 마우스가 올라 갔을 때
        같은 레벨의 바로 뒤에 있는 요소 중에 ul 태그를 가져옴 */
        #nevi>li>a:hover+ul{
            /* 평소에는 안보여지다가 마우스가 올라갈 때만 효과를 부여 */
            display: block;
        }

        #nevi>li>ul:hover{
            display: block;
        }
    </style>

</head>
<body>
    <div class="nevigator">
        <ul id="nevi">
            <li><a href="">java</a></li>
            <li><a href="">Oracle</a></li>
            <li>
                <a href="">Front-End</a>
                <ul>
                    <li><a href="">HTML</a></li>
                    <li><a href="">CSS</a></li>
                    <li><a href="">JavaScript</a></li>
                    <li><a href="">Jquery</a></li>
                </ul>
            </li>
            <li>
                <a href="">Server</a>
                <ul>
                    <li><a href="">JDBC</a></li>
                    <li><a href="">Servlet</a></li>
                    <li><a href="">JSP</a></li>
                    <li><a href="">Ajax</a></li>
                </ul>
            </li>
            <li>
                <a href="">Framework</a>
                <ul>
                    <li><a href="">MyBatis</a></li>
                    <li><a href="">Spring</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>