纯css实现三级导航栏
直接上代码
<!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>纯css实现三级导航栏</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-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="/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/?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="/huawei-dumps.php">Huawei</a></li>
<li><a href="/microsoft-certification.php">Microsoft</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>
核心代码
.nav_ctn div :hover>ul {
display: block;
}
- :hover前头是否有空格
- 如果没有空格，代码选择整个div容器，如果有空格，代表选择的是div下面的某一个悬浮对应的子元素
相关博客
- 感谢这位大佬的代码启发
that's all
