react-menubar-cs/dist/menubar.css

An menubar component.

.menu-bar{box-shadow:0 2px 5px rgba(0,0,0,.2);padding:10px}.menu-list{display:flex;gap:20px;list-style:none;margin:0;padding:0}.menu-item{cursor:pointer;font-size:16px;font-weight:600;padding:10px 15px;position:relative;transition:color .3s ease-in-out}.menu-item,.menu-title{align-items:center;display:flex}.menu-title{gap:5px}.dropdown{border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.2);left:0;list-style:none;min-width:200px;padding:5px 0;position:absolute;top:100%;z-index:1000}.submenu-item{cursor:pointer;padding:10px 15px;position:relative;transition:background .3s ease-in-out}.submenu-item,.submenu-title{align-items:center;display:flex;justify-content:space-between}.submenu-title{width:100%}.arrow,.arrow-right{transition:color .2s ease-in-out}.sub-dropdown{border-radius:5px;box-shadow:0 4px 6px rgba(0,0,0,.2);left:100%;list-style:none;min-width:160px;padding:5px 0;position:absolute;top:0;z-index:1000}.deep-submenu-item{align-items:center;cursor:pointer;display:flex;padding:10px 15px;transition:color .3s ease-in-out,background .3s ease-in-out}.deep-submenu-item:hover{background-color:rgba(255,215,0,.2);color:gold!important}.deep-submenu-icon{font-size:14px;margin-right:8px;transition:color .3s ease-in-out}.deep-submenu-item:hover .deep-submenu-icon{color:gold!important}.menu-icon,.submenu-icon{font-size:14px;margin-right:8px}