purecss-ui-menu
Version:
Responsive menu system with submenus and dropdowns built on purecss-ui.
1 lines • 6.63 kB
CSS
.pure-menu .menu-section-divider{margin:8px 0;overflow:hidden;border-bottom:1px solid #e5e5e5;color:#9f0000;padding-left:10px}.pure-menu .menu-section-header{display:block;padding:6px 32px;font-size:11px;color:#999;white-space:nowrap}.pure-menu .pure-menu-item.sub-menu ul{list-style:none}.pure-menu .pure-menu-item.sub-menu ul .pure-menu-link{font-weight:400}.pure-menu .pure-menu-item.sub-menu>.sub-menu-content{display:none;position:absolute;min-width:200px;margin:12px 0 0;padding:7px 0;background-clip:padding-box;border-radius:4px;background-color:#fff;border:1px solid #c3c3c3;box-shadow:0 4px 5px 0 rgba(0,0,0,.2);text-align:left;z-index:1}.pure-menu .pure-menu-item.sub-menu>.sub-menu-content .pure-menu-link{font-size:14px}.pure-menu .pure-menu-item.sub-menu>.sub-menu-content li a,.pure-menu .pure-menu-item.sub-menu>.sub-menu-content li button{display:block;text-decoration:none;padding:8px 32px;color:#333;white-space:nowrap}.pure-menu .pure-menu-item.sub-menu>.sub-menu-content li a .icon-left,.pure-menu .pure-menu-item.sub-menu>.sub-menu-content li button .icon-left{position:absolute;left:15px;top:11px}.pure-menu .pure-menu-item.sub-menu>.sub-menu-content li a .icon-right,.pure-menu .pure-menu-item.sub-menu>.sub-menu-content li button .icon-right{position:absolute;right:15px;top:11px}.pure-menu .pure-menu-item.sub-menu.open>.sub-menu-content{display:block}.pure-menu .pure-menu-item.sub-menu.open.open-left>.sub-menu-content{position:absolute;right:100%;top:-22px}.pure-menu .pure-menu-item.sub-menu.open.open-left>.sub-menu-content::before{content:none}.pure-menu .pure-menu-item.sub-menu.open.open-left>.sub-menu-content::after{content:none}.pure-menu .pure-menu-item.sub-menu.open.open-right>.sub-menu-content{position:absolute;left:100%;top:-22px}.pure-menu .pure-menu-item.sub-menu.open.open-right>.sub-menu-content::before{content:none}.pure-menu .pure-menu-item.sub-menu.open.open-right>.sub-menu-content::after{content:none}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open::before{content:"";height:0;width:0;position:absolute;right:6px;bottom:-12px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:none;border-bottom:8px solid #c3c3c3;z-index:2}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open::after{content:"";height:0;width:0;position:absolute;right:6px;bottom:-13px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:none;border-bottom:8px solid #fff;z-index:3}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-left::before{content:"";height:0;width:0;position:absolute;left:0;top:7px;border-left:10px solid #c3c3c3;border-right:none;border-top:10px solid transparent;border-bottom:8px solid transparent;z-index:2}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-left::after{content:"";height:0;width:0;position:absolute;left:-1px;top:7px;border-left:10px solid #fff;border-right:none;border-top:10px solid transparent;border-bottom:8px solid transparent;z-index:3}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-right::before{content:"";height:0;width:0;position:absolute;right:0;top:7px;border-left:none;border-right:10px solid #c3c3c3;border-top:10px solid transparent;border-bottom:8px solid transparent;z-index:2}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-right::after{content:"";height:0;width:0;position:absolute;right:-1px;top:7px;border-left:none;border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:8px solid transparent;z-index:3}@media screen and (max-width:1023px){.pure-menu.pure-menu-horizontal .pure-menu-list.menu-collapse{display:none}.pure-menu.pure-menu-horizontal.collapse-open .pure-g{display:-ms-grid;display:grid;padding-bottom:15px}.pure-menu.pure-menu-horizontal.collapse-open .menu-collapse{display:-ms-grid;display:grid}.pure-menu.pure-menu-horizontal.collapse-open li{text-align:left}.pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content{margin:0;padding:0;border:none;box-shadow:none;background-color:transparent}.pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content .pure-menu-link{font-size:12px}.pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content li a .icon-left,.pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content li button .icon-left{top:10px}.pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content li a .icon-right,.pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu>.sub-menu-content li button .icon-right{position:relative;left:10px;right:0;top:0}.pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu.open .sub-menu-content{position:relative;left:14px}.pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu.open.open-left .sub-menu-content{right:0;top:0}.pure-menu.pure-menu-horizontal.collapse-open .pure-menu-item.sub-menu.open.open-right .sub-menu-content{top:0}.pure-menu.pure-menu-horizontal .pure-menu-item.sub-menu .sub-menu-content li a,.pure-menu.pure-menu-horizontal .pure-menu-item.sub-menu .sub-menu-content li button{color:#333}.pure-menu.pure-menu-horizontal.menu-inverse .pure-menu-item.sub-menu .sub-menu-content li a,.pure-menu.pure-menu-horizontal.menu-inverse .pure-menu-item.sub-menu .sub-menu-content li button{color:#fff}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open::before{content:none}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open::after{content:none}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-left::before{content:none}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-left::after{content:none}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-right::before{content:none}.pure-menu-horizontal .pure-menu-list .pure-menu-item.sub-menu.open .open-right::after{content:none}}.menu-toggle{display:none;float:right;min-height:48px}.menu-toggle .menu-toggle-button{background-color:transparent;color:#555;border:1px solid #c3c3c3;box-shadow:none;outline:0;font-size:22px;height:40px;padding:4px 10px 0 10px}.menu-toggle .menu-toggle-button.active,.menu-toggle .menu-toggle-button.focus,.menu-toggle .menu-toggle-button.hover,.menu-toggle .menu-toggle-button:active,.menu-toggle .menu-toggle-button:focus,.menu-toggle .menu-toggle-button:hover{outline:0}@media screen and (max-width:1023px){.menu-toggle{display:flex;align-items:center;align-content:center}}