this code is to resolve the in i pad and ios devices to solve the border color :
-webkit-tap-highlight-color: transparent;
outline: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
this code is used to add the style in the fire fox:
with the help of this code we can add the code to this using the css
@-moz-document url-prefix()
this code will help to make a responsive drop down in all the device:
HTML
<divclass="dropdown">
<aclass="dropBtn"href="#">Services<iclass="fas fa-angle-down"></i></a>
<divclass="drop-content"><ahref="#">menu</a>
<ahref="#">Marketing</a><ahref="#">WordPress</a>
<!-- Creating sub menu Dropdown -->
<divclass="dropdown2"><aclass="dropBtn2"href="#">More<iclass="fas fa-angle-right"></i></a><divclass="drop-content2">
<ahref="#">food</a>
<ahref="#">travel</a>
<ahref="#">acamodation</a>
<ahref="#">salary</a></div></div></div></div>
css part:
/* Responsive dropdown code */.navbar .nav-links .dropdown,
.navbar .nav-links .dropdown2{float: none;width: 100%;}
.navbar .nav-links .drop-content, .navbar .nav-links .drop-content2{position: relative;background-color: rgb(220, 220, 250);top: 0px;left: 0px;}
/* Text color */
.navbar .nav-links .drop-content a {color: rgb(9, 14, 90);} }
/* Dropdown menu CSS code */
.dropdown{position: relative;display: inline-block;}
.drop-content, .drop-content2{display: none;position: absolute;background-color: #1b4cd3;min-width: 120px;font-size: 16px;top: 34px;z-index: 1;box-shadow: 0px10px25pxrgba(0, 0, 0, 0.4);}
/* on hover show dropdown */
.dropdown:hover .drop-content, .dropdown2:hover .drop-content2{display: block;}
/* drondown links */.drop-content a {padding: 12px10px;border-bottom: 1pxsolidrgb(197, 197, 250);display: block;transition: all0.5s ease !important;}
.dropBtn .drop-content a:hover {background-color: rgb(230, 230, 230);}
.dropdown:hover .dropBtn, .dropdown2:hover .dropBtn2{background-color: rgba(0, 0, 0, 0.3);}
.dropdown2.drop-content2{position: absolute;left: 120px;top: 126px;}.dropBtn2i {margin-left: 15px;}