.demo{ background: #F44336; } nav.navbar.bootsnav{ border: none; background: none; } nav.navbar.bootsnav ul.nav > li{ margin-right: 20px; } nav.navbar.bootsnav ul.nav > li > a{ color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 10px 15px; border-radius: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s; } nav.navbar.bootsnav ul.nav > li.dropdown > a{ padding: 10px 30px 10px 15px; } nav.navbar.bootsnav ul.nav > li.active > a, nav.navbar.bootsnav ul.nav > li.active > a:hover, nav.navbar.bootsnav ul.nav > li > a:hover, nav.navbar.bootsnav ul.nav > li.on > a{ color: #F44336; background-color: transparent; } nav.navbar.bootsnav ul.nav > li > a > span:before, nav.navbar.bootsnav ul.nav > li > a > span:after{ content: ""; width: 0; height: 0; background: #fff; border-radius: 10px; position: absolute; top:0; left: 0; z-index: -1; transition: all 0.3s ease 0s; } nav.navbar.bootsnav ul.nav > li > a > span:after{ left: auto; top: auto; right: 0; bottom: 0; } nav.navbar.bootsnav ul.nav > li:hover > a > span:before, nav.navbar.bootsnav ul.nav > li.active > a > span:before, nav.navbar.bootsnav ul.nav > li:hover > a > span:after, nav.navbar.bootsnav ul.nav > li.active > a > span:after{ width: 100%; height: 100%; } nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{ position: absolute; top: 10px; right: 10px; margin: 0 0 0 7px; } nav.navbar.bootsnav ul.nav > li.dropdown > ul{ top: 100%; transition: all 0.8s ease 0s; } nav.navbar.bootsnav ul.nav > li.dropdown.on > ul{ top: 140%; } .dropdown-menu.multi-dropdown{ position: absolute; left: -100% !important; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border: none; border-radius: 10px; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li a:hover, nav.navbar.bootsnav li.dropdown ul.dropdown-menu li a:hover{ color: #F44336; background-color: rgba(0,0,0,0.1); transition: all 0.3s ease 0s; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li{ font-size: 14px; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{ font-size: 16px; font-weight: bold; color:#F44336 ; } @media only screen and (max-width: 990px){ .dropdown-menu.multi-dropdown{ left: 0 !important; } nav.navbar.bootsnav .navbar-toggle{ background: transparent !important; color: #fff; } nav.navbar.bootsnav ul.nav > li{ width: 75%; margin: 5px auto 15px; } nav.navbar.bootsnav.navbar-mobile ul.nav > li > a{ text-align: center; color: #fff; border: none; } nav.navbar.bootsnav ul.nav > li.dropdown > a{ padding: 15px 30px 15px 15px; } nav.navbar.bootsnav ul.nav > li.active > a, nav.navbar.bootsnav ul.nav > li > a, nav.navbar.bootsnav ul.nav > li > a:hover, nav.navbar.bootsnav ul.nav > li.on > a{ color: #F44336; } nav.navbar.bootsnav.navbar-mobile .navbar-collapse{ background: #F44336; } nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li > a{ color: #fff; border-bottom-color: none; padding: 0 10px; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li a:hover, nav.navbar.bootsnav li.dropdown ul.dropdown-menu li a:hover, nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title:hover{ background-color: rgba(255,255,255,0.2); } nav.navbar.bootsnav li.dropdown.on a.dropdown-toggle::before{ color: #F44336 !important; } nav.navbar.bootsnav ul.nav > li.dropdown > ul{ top: 100%; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title, nav.navbar.bootsnav.navbar-mobile ul.nav ul.dropdown-menu .col-menu ul.menu-col li a{ font-size: 14px; font-weight: normal; color: #fff; padding: 0 10px; } }