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

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

    <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>