0

I have a pure css pull-down menu that works fine on desktop, iPad and older Android browsers.

But Chrome on Android 5 has a problem: When I select the menu header ("First menu"), then the first item ("Lorem") is always automatically selected. How can I avoid that?

I'm unable to reproduce this problem in other mobile browsers. It also works fine in Chrome on older Android versions.

enter image description here

HTML:

<div class="menuouter"><div onClick=”return true;” class="firstmenu menuinner">First menu<ul>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="#">Ipsum</a></li>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="#">Ipsum</a></li>
</ul></div></div>

CSS:

*, *:before, *:after {
    box-sizing: border-box;
}
.menuouter {
    height: 2.2em;
    display: inline-block;
    vertical-align: top;
    width: 200px;
    margin: 0 10px 0 0;
}
.firstmenu {
    z-index: 1;
}
.menuinner { 
    line-height: 2.0em;
    margin: 10px;
    padding: 0; 
    border: 2px solid purple; 
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
}
.menuinner > ul { 
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.menuinner > ul li {
    margin: 0;
    list-style-type: none;
}
.menuinner > ul li a {
    background-color: #ccc;
    width: 100%;
    display: block;
    padding: 5px;
    border-bottom: 1px solid red;
}
.menuinner > ul li a:last-child {
    border-bottom: none;
}
.menuinner:hover > ul {
    padding: 0; 
    margin: 0; 
    list-style-type: none; 
    display: block; 
    background: #f9f9f9; 
    border-top: 1px solid purple;
}
.menuinner:hover > ul > li {}
.menuinner:hover > ul > li:hover a {
    background: #ccc;
}
.menuinner:hover > ul > li:hover > a { 
    color: red;
    background-color: blue;
}
neu242
  • 15,796
  • 20
  • 79
  • 114

1 Answers1

0

I do not see Chrome on Android 5 behaving differently from other versions. I believe that you are experiencing a sausage-finger/tiny-phone effect... no offense :-).

When you click on the dropdown, the area that you interacted with happens to overlap with where the first li is located... thereby triggering the hover.

Try this version with a larger area to click on: fiddle.

I would consider disabling the li:hover entirely on touch devices. You could use media queries or javascript to detect the kind of device (see this question), and then disable the hover with pointer-events: none; (see docs). Note that this assumes either touch or mouse functionality and will not work on devices with both.

See Disable hover effects on mobile browsers for a comprehensive explaination of other methods.

Community
  • 1
  • 1
pschueller
  • 4,362
  • 2
  • 27
  • 50
  • 2
    hello, if a sausage is involved, maybe to find out , you can test this with a transition delay : http://jsfiddle.net/nxq55ppr/14/ (not display but height to trigger delay). – G-Cyrillus Mar 13 '15 at 14:45
  • @GCyrillus Great idea! Yes, the transition delay seems to be working. At least on my devices. It may still get highlighted on laggy devices though. – pschueller Mar 13 '15 at 15:15
  • @pschueller: It does indeed autoselect on my phone, and there are no sausages involved. I've tried Chrome on other phones, and also other browsers on my phone, where it works fine (that is: the first doesn't get the blue color). – neu242 Mar 17 '15 at 19:45
  • @neu242 That is very strange. I've tried on a Nexus7 and an Oppo Find 5 both running 5.0.0 and freshly installed Chrome, but I can't seem to reproduce the problem. Also seems to work on my virtual devices, What phone do you have? – pschueller Mar 20 '15 at 00:44
  • @pschueller: I've got a Nexus 5. I'm on Android 5.1 now, and still the same problem. Annoying! :( – neu242 Mar 20 '15 at 11:14