纯CSS实现导航下拉菜单代码

纯CSS实现导航下拉菜单代码

纯CSS实现导航下拉菜单代码

新建html文档。

书写hmtl代码。

初始化css代码。

书写css代码。

.nav-bar { position: relative; z-index: 1000; overflow: hidden; min-width: 900px; height: 45px; }

.nav-bar:hover { overflow: visible; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

.nav-bg { position: absolute; width: 100%; height: 272px; background: #24619c; background: rgba(36,97,158,.95); -webkit-transition: .3s; transition: .3s; z-index: 9999; }

.nav-top { height: 43px; border-top: 1px solid #5895d5; border-bottom: 1px solid #3b92e9; background: #459df5; }

.nav-content { position: absolute; width: 80%; left: 10%; }

.nav-content-box { position: absolute; top: 0; left: 0; width: 100%; }

.nav-content-box>li { float: left; line-height: 43px; }

.nav-content-box>li:hover { background: #19508b; }

.nav-content-box>li>span>a { display: block; width: 100%; margin: 0; height: 41px; line-height: 41px; }

.nav-content-box>li:hover>span>a { background: #338ce6; }

ul>li.index, ul>li.cat, ul>li.special, ul>li.user, ul>li.cooperation, ul>li.mobile { width: 120px; }

ul>li.index { height: 43px; }

ul.nav-content-box>li>ul { border-right: solid 1px #3a6fa2; margin: 10px 0 6px }

ul.nav-content-box>li>ul:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 }

.nav-content-box>li:hover>ul { border-right: none; padding-right: 1px; }

ul.nav-content-box>li>ul>li { float: left; width: 100%; line-height: 2; text-align: center; }

ul.nav-content-box>li.cat>ul>li { width: 49%; }

ul.nav-content-box>li>ul>li>a { display: block; width: 100%; }

代码整体结构。

查看效果。