I am testing website on Dell XPS device, which supports both touch and mouse(laptop/tablet). I have some menus that have submenus and have hover, active and selected css where I change from display:none to disblay:block on the submenus(if no submenu then user is redirected to the page that is represented by menu option). Everything works just great on all browsers except IE(on these specific devices - touch/mouse).
Maybe there is a solution for this? To display submenus on touch if there is submenu under the selection. Those menu options that have submenus have class "multi-selection" and menu under it has classes "list" and "lvl-2".
CSS looks like this:
.multi-level{
&:hover, &:active, &.selected{
.list.lvl-2{
//dropdown display trigger
display: block;
}
}
}
Anyone has any ideas how to solve this for IE on such devices that suport mouse and touch interactions(with mouse it works just fine)?