[그누보드5.5] 커뮤니티 테마 버전업 (메인메뉴 변경) > TIP 자료실

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        body {

            font-family: 'Noto Sans KR', sans-serif;

            background-color: #f5f5f5;

            padding: 20px;

        }

        h2 {

            text-align: center;

            margin-bottom: 30px;

            font-size: 24px;

        }

        #gnb {

            max-width: 1200px;

            margin: 0 auto;

        }

        #gnb_1dul {

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

            gap: 5px;

            list-style: none;

            padding: 0;

        }

        .gnb_1dli {

            position: relative;

        }

        .gnb_1da {

            display: flex;

            width: 100px;

            height: 100px;

            justify-content: center;

            align-items: center;

            background-color: #4b70fd;

            color: white;

            text-decoration: none;

            font-size: 18px;

            font-weight: bold;

            border-radius: 10px;

            box-shadow: 0 4px 10px rgba(0,0,0,0.1);

            transition: all 0.3s ease;

            text-align: center;

            padding: 0px;

        }

        .gnb_1da:hover {

            background-color: #3a5bd9;

            transform: translateY(-5px);

            box-shadow: 0 8px 15px rgba(0,0,0,0.15);

        }

        .gnb_2dul {

            position: absolute;

            top: 100%;

            left: 0;

            width: 180px;

            background-color: white;

            border-radius: 0 0 10px 10px;

            box-shadow: 0 5px 10px rgba(0,0,0,0.1);

            padding: 10px;

            list-style: none;

            margin-top: 10px;

            opacity: 0;

            visibility: hidden;

            transition: opacity 0.3s, visibility 0.3s;

            z-index: 100;

            pointer-events: none; /* 초기에는 마우스 이벤트 무시 */

        }

        /* 서브메뉴와 메인메뉴 사이에 보이지 않는 연결 영역 생성 */

        .gnb_1dli::after {

            content: '';

            position: absolute;

            top: 100%;

            left: 0;

            width: 100%;

            height: 15px; /* 메인메뉴와 서브메뉴 사이의 연결 영역 높이 */

            background-color: transparent;

        }

        /* 메인메뉴에 호버하거나 서브메뉴에 호버할 때 서브메뉴 표시 */

        .gnb_1dli:hover .gnb_2dul,

        .gnb_2dul:hover {

            opacity: 1;

            visibility: visible;

            pointer-events: auto; /* 보일 때는 마우스 이벤트 활성화 */

        }

        .gnb_2dli {

            margin-bottom: 0px;

        }

        .gnb_2da {

            display: block;

            padding: 8px 10px;

            text-decoration: none;

            color: #333;

            font-size: 14px;

            border-left: 3px solid transparent;

            transition: all 0.2s;

        }

        .gnb_2da:hover {

            border-left: 3px solid #4b70fd;

            background-color: #f0f4ff;

            padding-left: 15px;

        }

        #gnb_empty {

            padding: 80px 0;

            text-align: center;

            color: #888;

        }

    </style>