Pure CSS to achieve three-level navigation bar

Direct code

<! DOCTYPEhtml>
<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>Pure CSS to achieve three-level navigation bar</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul.ol {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: # 232323;
        }
        
        .flex_box {
            display: flex;
        }
        
        .nav_ctn {
            width: 100%;
            padding-top: 50px;
        }
        
        .pc_width {
            width: 1200px;
            margin: auto;
            border: 1px solid rgba(243.244.246.1);
        }
        
        .nav_ctn {
            font-size: 15px;
            height: 57px;
        }
        
        .nav_ctn .item {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 13px;
            white-space: nowrap;
            cursor: pointer;
        }
        
        .item.active {
            border-top: 1px solid #f2a525;
            background: #fffaf1;
        }
        
        .nav_ctn .item:hover {
            border-top: 1px solid #f2a525;
            background: #fffaf1;
        }
        
        .nav_ctn .pc_width {
            align-items: center;
            height: 57px;
        }
        
        .head_ctn {
            background: #202f80;
            color: #474a47;
            text-align: center;
            font-size: 16px;
            height: 70px;
            font-weight: 700;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            color: #fff;
        }
        
        .one_menu {
            display: block;
            position: relative;
            z-index: 8;
        }
        
        .one_menu>ul {
            display: none;
            position: absolute;
            top: 57px;
            left: 0;
        }
        
        .one_menu>ul li ul {
            background: #fff;
            display: none;
            position: absolute;
            width: 180px;
            right: -180px;
            text-align: left;
            line-height: 20px;
            top: 0px;
        }
        
        .one_menu>ul li {
            background: #fff;
            text-align: left;
            font-size: 14px;
            font-weight: 500;
            position: relative;
        }
        
        .one_menu>ul a {
            color: #065e77;
            display: block;
            width: 180px;
            line-height: 40px;
            padding: 10px 20px;
        }
        
        .one_menu>ul a:hover {
            color: #1bb1dc;
        }
        
        .one_menu>ul li:hover {
            background-color: #eee;
        }
        
        .nav_ctn div :hover>ul {
            display: block;
        }
        
        .head_main {
            position: relative;
            height: 24px;
        }
        
        .head_ctn a {
            display: inline-block;
            right: 10%;
            height: 35px;
            line-height: 35px;
            width: 100px;
            background: red;
            border-radius: 4px;
            color: #fff;
            position: absolute;
            top: -5px;
        }
    </style>
</head>

<body>

    <div class="nav_ctn">

        <div class="pc_width flex_box" style="justify-content:space-between">
            <div class="item">
                <a href="https://cciedump.spoto.net/?gclid=sem" target="_blank">
                    <img height="20" width="22" src="./img/home.png" alt=""></img>
                    <span style="vertical-align: middle;">HOME</span>
                </a>
            </div>
            <div class="item active one_menu">
                <a href="https://cciedump.spoto.net/ccna-2020.php?gclid=sem" target="_blank">
                        CCNA
                    </a>
                <ul class="two_menu">
                    <li class="two_item">
                        <a href="/ccna-other-2020.php">CCNA Other</a>
                        <ul class="three_menu">
                            <li><a href="/200-301-certificates.php">200-301.</a></li>
                        </ul>
                    </li>
                    <li class="two_item">
                        <a href="/devnet-2020.php">DevNet</a>
                        <ul class="three_menu">
                            <li><a href="/200-901-certificates.php">200-901.</a></li>
                        </ul>
                    </li>
                    <li class="two_item">
                        <a href="/cyber-ops-2020.php">Cyber Ops</a>
                        <ul class="three_menu">
                            <li><a href="/200-201-certificates.php">200-201 CBROPES</a></li>

                        </ul>
                    </li>
                </ul>




            </div>
            <div class="item one_menu">
                <a href="https://cciedump.spoto.net/ccnp-ccie-2020.php?gclid=sem" target="_blank">CCNP/CCIE</a>
                <ul class="two_menu">
                    <li class="two_item"><a href="/enterprise-2020.php">Enterprise (Wireless)</a>
                        <ul class="three_menu">
                            <li><a>Core Exam</a>
                                <ul>
                                    <li><a href="/350-401-certificates.php">350-401 ENCOR</a></li>
                                </ul>
                            </li>
                            <li><a>Concentration Exams</a>
                                <ul>
                                    <li><a href="/300-410-certificates.php">300-410 ENARSI</a></li>
                                    <li><a href="/300-415-certificates.php">300-415 ENSDWI</a></li>
                                    <li><a href="/300-420-certificates.php">300-420 ENSLD</a></li>
                                    <li><a href="/300-425-certificates.php">300-425 ENWLSD</a></li>
                                    <li><a href="/300-430-certificates.php">300-430 ENWLSI</a></li>
                                    <li><a href="/300-435-certificates.php">300-435 ENAUTO</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="two_item"><a href="/service-provider-2020.php">Service Provider</a>
                        <ul class="three_menu">
                            <li><a>Core Exam</a>
                                <ul>
                                    <li><a href="/350-501-certificates.php">350-501 SPCOR</a></li>
                                </ul>
                            </li>
                            <li><a>Concentration Exams</a>
                                <ul>
                                    <li><a href="/300-510-certificates.php">300-510 SPRI</a></li>
                                    <li><a href="/300-515-certificates.php">300-515 SPVI</a></li>
                                    <li><a href="/300-535-certificates.php">300-535 SPAUTO</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="two_item"><a href="/data-center-2020.php">Data Center</a>
                        <ul class="three_menu">
                            <li><a>Core Exam</a>
                                <ul>
                                    <li><a href="/350-601-certificates.php">350-601 DCCOR</a></li>
                                </ul>
                            </li>
                            <li><a>Concentration Exams</a>
                                <ul>
                                    <li><a href="/300-610-certificates.php">300-610 DCID</a></li>
                                    <li><a href="/300-615-certificates.php">300-615 DCIT</a></li>
                                    <li><a href="/300-620-certificates.php">300-620 DCACI</a></li>
                                    <li><a href="/300-625-certificates.php">300-625 DCSAN</a></li>
                                    <li><a href="/300-635-certificates.php">300-635 DCAUTO</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="two_item"><a href="/security-2020.php">Security</a>
                        <ul class="three_menu">
                            <li><a>Core Exam</a>
                                <ul>
                                    <li><a href="/350-701-certificates.php">350-701 SCOR</a></li>
                                </ul>
                            </li>
                            <li><a>Concentration Exams</a>
                                <ul>
                                    <li><a href="/300-710-certificates.php">300-710 SNCF</a></li>
                                    <li><a href="/300-715-certificates.php">300-715 SISE</a></li>
                                    <li><a href="/300-720-certificates.php">300-720 SESA</a></li>
                                    <li><a href="/300-725-certificates.php">300-725 SWSA</a></li>
                                    <li><a href="/300-730-certificates.php">300-730 SVPN</a></li>
                                    <li><a href="/300-735-certificates.php">300-735 SAUTO</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="two_item"><a href="/collaboration-2020.php">Collaboration</a>
                        <ul class="three_menu">
                            <li><a>Core Exam</a>
                                <ul>
                                    <li><a href="/350-801-certificates.php">350-801 CLCOR</a></li>
                                </ul>
                            </li>
                            <li><a>Concentration Exams</a>
                                <ul>
                                    <li><a href="/300-810-certificates.php">300-810 CLICA</a></li>
                                    <li><a href="/300-815-certificates.php">300-815 CLACCM</a></li>
                                    <li><a href="/300-820-certificates.php">300-820 CLCEI</a></li>
                                    <li><a href="/300-835-certificates.php">300-835 CLAUTO</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="two_item"><a href="/npie-devnet-2020.php">DevNet</a>
                        <ul class="three_menu">
                            <li><a>Core Exam</a>
                                <ul>
                                    <li><a href="/350-901-certificates.php">350-901 DEVCOR</a></li>
                                </ul>
                            </li>
                            <li><a>Concentration Exams</a>
                                <ul>
                                    <li><a href="/300-910-certificates.php">300-910 DEVOPS</a></li>
                                    <li><a href="/300-915-certificates.php">300-915 DEVIOT</a></li>
                                    <li><a href="/300-920-certificates.php">300-920 DEVWBX</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="two_item"><a href="/design-2020.php">Design</a>
                        <ul class="three_menu">
                            <li><a>CCDE</a>
                                <ul>
                                    <li><a href="/352-001-certificates.php">352-001.</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="item one_menu">
                <a href="https://cciedump.spoto.net/ccnp-ccie-2020.php?gclid=sem" target="_blank">Cisco Other</a>
                <ul>
                    <li><a href="/500-470-certificates.php">500-470 ENSDENG</a></li>
                    <li><a href="/500-490-certificates.php">500-490 ENDESIGN</a></li>
                    <li><a href="/500-560-certificates.php">500-560.</a></li>
                    <li><a href="/600-455-certificates.php">600-455 UCCED</a></li>
                    <li><a href="/600-460-certificates.php">600-460 UCCEIS</a></li>
                    <li><a href="/810-440-certificates.php">810-440 DTBAA</a></li>
                    <li><a href="/820-445-certificates.php">820-445 DTBAS</a></li>
                    <li><a href="/840-450-certificates.php">840-450 DTBAD</a></li>
                    <li><a href="/500-450-certificates.php">500-450 UCCEIS</a></li>

                </ul>
            </div>
            <div class="item one_menu">
                <a href="https://cciedump.spoto.net/lab-dumps.php?gclid=sem" target="_blank">CCIE LAB</a>
                <ul>
                    <li><a href="/ccie-enterprise-lab-certificated.php">CCIE Enterprise  Lab</a></li>
                    <! --<li><a href="ccie-rs-lab.php">CCIE RS Lab</a></li> -->
                    <li><a href="/ccie-security-lab.php">CCIE Security Lab</a></li>
                    <li><a href="/ccie-dc-lab.php">CCIE DC Lab</a></li>
                    <li><a href="/ccie-wireless-lab.php">CCIE Wireless Lab</a></li>

                    <li><a href="/ccie-sp-lab.php">CCIE SP Lab</a></li>
                    <li><a href="/ccie-coll-lab.php">CCIE Collaboration Lab</a></li>
                </ul>
            </div>
            <div class="item one_menu">
                <a href="https://cciedump.spoto.net/ccie-enterprise-Infrastructure-en-training/?gclid=sem" target="_blank">Cisco Training </a>
                <ul>
                    <li><a href="/ccie-enterprise-Infrastructure-en-training/">CCIE Training</a></li>
                    <li><a href="/ccnp-training/">CCNP Training</a></li>
                </ul>
            </div>
            <div class="item one_menu">
                <a href="https://cciedump.spoto.net/pass-your-pmp-exam-at-1st-try-with-spoto-pmp-dump/#/?gclid=sem" target="_blank">PMP</a>
                <ul>
                    <li><a href="/pmp-answers-questions.php">PMP</a></li>
                    <li><a href="/acp-dumps.php">PMI-ACP</a></li>
                    <! --<li><a href="/npdp-dumps.php">NPDP</a></li>-->
                    <li><a href="/pmi-pba-certificate-exam.php">PBA</a></li>
                    <li><a href="/pmi-capm-certificate-exam.php">CAPM</a></li>
                    <li><a href="/pmi-pgmp-certificate-exam.php">PGMP</a></li>
                    <li><a href="/pmi-rmp-certificate-exam.php">RMP</a></li>
                </ul>
            </div>

            <div class="item one_menu">
                <a href="https://cciedump.spoto.net/pass-your-aws-saa-c02-exam-at-fiirst-try-with-real-exam-questions-and-answers/#/?gclid=sem" target="_blank">AWS</a>
                <ul>
                    <li><a href="/aws-certified-developer.php">DVA-C01</a></li>
                    <li><a href="/aws-certified-architect.php">SAA-C02</a></li>
                    <li><a href="/aws-certificated-advanced.php">ANS-C00</a></li>
                    <li><a href="/aws-certificated-architect.php">SAP-C01</a></li>
                    <li><a href="/aws-certificated-specialty.php">BDS-C01</a></li>
                    <li><a href="/aws-certified-sysops.php">SOA-C01</a></li>
                    <li><a href="/aws-certificated-professional.php">DOP-C01</a></li>
                    <li><a href="/aws-certificated-clf.php">CLF-C01</a></li>
                    <li><a href="/aws-certificated-axs.php">AXS-C01</a></li>
                    <li><a href="/aws-certificated-security.php">SCS-C01</a></li>
                    <li><a href="/aws-certificated-mls.php">MLS-C01</a></li>
                </ul>
            </div>
            <! -- <div class="item one_menu"> <a href="https://cciedump.spoto.net/pass-your-pmp-exam-at-1st-try-with-spoto-pmp-dump/#/?gclid=sem" target="_">Microsoft </a> </div> -->
            <div class="item one_menu">
                <a href="https://cciedump.spoto.net/?gclid=sem" target="_blank">OTHER</a>
                <ul>
                    <li class="drop-down"><a href="/isaca-dumps.php">ISACA</a>
                        <ul>
                            <li><a href="/isaca-cisa-certificates.php">CISA</a></li>
                            <li><a href="/isaca-cism-certificates.php">CISM</a></li>
                            <li><a href="/crisc-certificates.php">CRISC</a></li>
                        </ul>
                    </li>
                    <li class="drop-down"><a href="/f5-certificate.php">F5</a>
                        <ul>
                            <li><a href="/f5-101-certificate-exam.php">101</a></li>
                            <li><a href="/f5-201-certificate-exam.php">201</a></li>
                            <li><a href="/f5-301a-certificate-exam.php">301a</a></li>
                            <li><a href="/f5-301b-certificate-exam.php">301b</a></li>
                        </ul>
                    </li>
                    <li><a href="/gcih-certificate-exam.php">GCIH</a></li>
                    <li><a href="/oracle-dumps.php">Oracle</a></li>
                    <! --<li><a href="redhat-dumps.php">Redhat</a></li>-->
                    <li><a href="/huawei-dumps.php">Huawei</a></li>
                    <li><a href="/microsoft-certification.php">Microsoft</a></li>
                    <! -- <li><a href="f5-dumps.php">F5</a></li> -->

                    <li><a href="/fortinet-dumps.php">Fortinet</a></li>
                    <li><a href="/opengroup-certificate-ogo-093-exam.php">Open Group</a></li>
                </ul>
            </div>
            <div class="item one_menu">
                <a href="/blog" target="_blank">Blog</a>

            </div>
            <div class="item one_menu">
                <a href="/blog" target="_blank">Language</a>
                <ul>
                    <li><a href="/arabicblog" target="_blank">Arabic</a></li>
                </ul>
            </div>

        </div>

    </div>


</body>

</html>
Copy the code

The core code

.nav_ctn div :hover>ul {
            display: block;
   }
Copy the code
  • :hover Whether there is a space before it
  • If there is no space, the code selects the entire div container; if there is space, it selects one of the floating children below the div

Related blog

  • Thanks to the big guy for the code inspiration

that’s all