http://softpeakscakery.com
My navigation menu is working in every browser I have tested EXCEPT Google Chrome on Android. It _looks_ alright, however, none of the links work. If I click on one of the links, the dropdown menu closes, and it doesn’t go to any of the pages.
I have a feeling that it has to do with the absolute positioning, because if I long press the link, it asks me if I want to save the image, and the link drops down directly over an image. Every other browser asks me if I want to open up the link in a new tab. Is there anyone who can take a look and throw up some advice?
here is the CSS code:
@media screen and (max-width: 639px){
.region.region-main-menu ul{
display: block;
@include push(3);
@include span-columns(4, 8);
}
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
//z-index: 100;
position: absolute;
margin: 0;
padding: 5px 0;
top: 0;
left: 0;
border: solid 1px #aaa;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all
items */
margin: 0;
}
.nav .first {
display: block; /* show only current
item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
width: 50%;
}
.nav .first a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
}
