본문 바로가기
프론트엔드 개발자/CSS

html css 리스트 메뉴menu 만들기 클론코딩 3 +code

by 신디블로그 2023. 3. 21.
SMALL
<!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>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        body {
            padding: 50px;
        }

        .cl {
            display: flex;
            background-color: #eee;
        }
        .cl > li {
            flex:none;
            width: 256px;
            position: relative;
        }
        .cl > li > a {
            display: block;
            line-height: 63px;
            font-size: 20px;
            color:#e42c01;
            font-weight: 700;
            letter-spacing: -1px;
            background: #ddd;
        }

        /* 2레벨 */
        .cl .sub {
            background: #e42c01;
            position: absolute;
            position: absolute;
            left:0; top:63px;
            width: 212px;
            padding: 22px;
            display: none;
        }
        .cl .sub li:not(:last-child) {
            margin-bottom: 12px;
        }
        .cl .sub li a {
            display: block;
            line-height: 25px;
            font-size: 15px;
            color:#fff;
        }

        /* hover 설정 */
        .cl > li:hover .sub {
            display: block;
        }


        .spacer400 {
            height: 400px;
            background-color: #efefef;
        }


        /* 백병원 1레벨 */
        .baek {
            width: 1170px;
            display: flex;
            margin: 0 auto;
        }
        .baek > li {
            flex:none;
            width: 234px;
            position: relative;
        }
        .baek > li > a {
            display: block;
            line-height: 72px;
            text-align: center;
            font-size: 20px;
            color:#111;
            font-weight: 700;
            background: #ccc;
            position: relative;
        }
        /* 메뉴상단 테두리 만들기 */
        .baek > li > a::before {
            content: '';
            width: 234px;
            height: 4px;
            background: #2a629d;
            position: absolute;
            left: 0; top: 0;
            display: none;

        }

        /*백병원 2레벨*/

        .baek .sub {
            position: absolute;
            left: 0; top: 72px;
            border-right: 1px solid #666;
            width: 199px;
            padding: 17px;
            display: none;
            background-color: rgb(208, 208, 231);
        }

        .baek .sub:last-child .sub{
            border-right: 0 none;
            width: 200px;

        }



        /* hover시 설정 */

        .baek > li:hover .sub {
            display: block;
        }

        .baek > li:hover > a::before {
            display: block;

        }

        /*메뉴만들기*/

        .homemeue {
            display: flex;
            width: 1925px;
            margin: 0 auto;


        }

        .homemeue > li{
            flex: none;
            position: relative;
           
           
        }

        .homemeue > li > a{
            display: block;
            width: 275px;
            height: 35px;
            background-color: #666;
            text-align: center;
            font-size: 18px;
            line-height: 35px;  
           
        }

        .homemeue .sub2 {
            position: absolute;
            left: 0; top: 35px;
            width: 239px;
            display: none;
            background-color: rgb(208, 208, 231);
           
        }

        .homemeue .sub2 > a {
            border: 1px solid #222;
            padding: 17px;
            text-align: center;
           
        }


        .homemeue .sub2 li:not(:last-child) {
            border-bottom: 1px solid #929090;
           
        }




        /* .homemeue .sub2:last-child .sub2{
            border-right: 0 none;
            width: 200px;

        } */

        .homemeue > li:hover .sub2 {
            display: block;
        }





   


    </style>
</head>
<body>
    <!-- 문화포털 메뉴따라하기 -->
    <ul class="cl">
        <li><a href="#">문화체험</a>
            <ul class="sub">
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
            </ul>
        </li>
        <li><a href="#">문화공감</a>
            <ul class="sub">
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
            </ul>
        </li>
        <li><a href="#">문화지식</a>
            <ul class="sub">
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
            </ul>
        </li>
        <li><a href="#">문화알리미</a>
            <ul class="sub">
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
                <li><a href="#">문화캘린더</a></li>
            </ul>
        </li>
    </ul>
    <div class="spacer400"></div>
    <!-- 백병원 메뉴 따라하기 -->
    <div class="baek">
        <li><a href="#">백병원 소개</a>
            <ul class="sub">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul>      
        </li>
        <li><a href="#">백병원 소개</a>
            <ul class="sub">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
        <li><a href="#">백병원 소개</a>
            <ul class="sub">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
        <li><a href="#">백병원 소개</a>
            <ul class="sub">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
        <li><a href="#">백병원 소개</a>
            <ul class="sub">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
    </div>
    <div class="spacer400"></div>
    <ul class="homemeue">
        <li><a href="#">하위메뉴</a>
            <ul class="sub2">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul>
        </li>
        <li><a href="#">하위메뉴</a>
            <ul class="sub2">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
        <li><a href="#">하위메뉴</a>
            <ul class="sub2">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
        <li><a href="#">하위메뉴</a>
            <ul class="sub2">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
        <li><a href="#">하위메뉴</a>
            <ul class="sub2">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
        <li><a href="#">하위메뉴</a>
            <ul class="sub2">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
        <li><a href="#">하위메뉴</a>
            <ul class="sub2">
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
                <li><a href="#">인제학원</a></li>
            </ul></li>
    </ul>
</body>
</html>

 

LIST
저작자표시 비영리 변경금지

'프론트엔드 개발자 > CSS' 카테고리의 다른 글

HTML CSS FORM 태그 정리 + code  (1) 2023.03.22
html css form요소 파악하기  (0) 2023.03.22
html css 가시성제어, 마우스이벤트, not() 부정선택자,background  (0) 2023.03.21
html css font  (0) 2023.03.20
HTML Css를 이용해서 이미지 넣기 , 아이콘 넣기 background-image  (0) 2023.03.17

관련글

댓글

티스토리툴바