I am struggling to understand why the mobile sub menu on my website is displaying differently in Chrome compared to Firefox. If you visit and view it at a resolution below 1200px, you can click on the menu toggle to open up the menu and hover over the Property Search link to see the sub-menu.
In Firefox, the menu functions exactly as intended. However, in Chrome, the sub-menu appears trapped inside the primary menu container. I need to find a solution to make the sub-menu behave consistently across both browsers. Any assistance would be greatly appreciated.
The CSS code in question:
.main-navigation ul ul {
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
z-index: 99999;
transition: all 0.45s ease 0s;
text-align: left;
width:185px;
left:-999em;
position:absolute;
margin-top:30px;
margin-left:-25px;
padding:0;
-webkit-transition: all 0.45s ease;
-moz-transition: all 0.45s ease;
-o-transition: all 0.45s ease;
transition: all 0.45s ease;
}
@media only screen and (max-width:1200px) {
.main-navigation ul ul {
margin-top:32px;
position:absolute;
}
}