* { margin:0; padding:0; box-sizing:border-box; font-family:microsoft yahei; } ul { list-style:none; } a { text-decoration:none; color:#000; } .clearfix::after { content:""; display:block; height:0; clear:both; } .nav-bar { min-width:940px; max-width:1140px; margin:0 auto; height:40px; line-height:40px; border-bottom:1px solid #d2d2d2; background-color:#fff; } .nav-bar .nav-list { }.nav-bar .nav-list .nav-item { float:left; font-weight:bold; font-size:14px; position:relative; } .nav-bar .nav-list .nav-item a { display:block; width:100%; padding:0px 45px; text-align:center; white-space:nowrap; } .nav-bar .nav-list .nav-item:first-child>a { background-color:#7bc938; color:#fff; } .nav-bar .nav-list .nav-item:hover>a { background-color:#7bc938; color:#fff; } .nav-bar .nav-list .nav-item .second-list { display:none; position:absolute; top:40px; left:0; background-color:#fff; z-index:20; } .nav-bar .nav-list .nav-item:hover .second-list { display:block; border:1px solid #e5e5e5; font-weight:normal; } .nav-bar .nav-list .nav-item .second-list .second-item { }.nav-bar .nav-list .nav-item .second-list .second-item:hover>a { background-color:#7bc938; color:#fff; } .nav-bar .nav-list .nav-item .second-list .second-item .third-list { position:absolute; left:100%; top:0; width:450px; display:none; background-color:#fff; height:-webkit-fill-available; } .nav-bar .nav-list .nav-item .second-list .second-item .third-list .third-item { float:left; } .nav-bar .nav-list .nav-item .second-list .second-item:hover .third-list { display:block; height:100%; border:1px solid #e5e5e5; } .nav-bar .nav-list .nav-item .second-list .second-item .third-list .third-item:hover>a { background-color:#7bc938; color:#fff; }
更新时间:2020-04-30 00:29:16
一个非常简单使用的导航菜单,没有js代码, 简单的几行css样式 完成。适用于商城导航栏。