Using :focus pseudo class whenever you use :hover`pseudo class will work.

If you need extra script such as js function read it more at following link.

As you know, :hover behavior doesn’t exist on touch screen devices. So when you design a responsive website, you should carefully plan when and where to use :hover interactions. Simple links that open some URL will loose their :hover effect on some touch screen devices. On iOS:hover is triggered before the click event, so you will see the hover style for a brief moment before the page changes. Those are minor things, they don’t affect the functionality of the site. The real problem is a :hover  that either hides or shows another element using display or visibility CSS properties. This type of :hover will transform into the double tap behavior on touch screens.

http://www.prowebdesign.ro/how-to-deal- … n-devices/

Example :
a:hover, a:focus{
color: green;
}

Eric, I didn't because I didn't understand the code.
This is what I wrote in my answer:

@ Eric. Interesting piece of code. I never used this. Can you tell me some more about this? Although I don't think it offers a solution for now, because mobile devices don't use a mouse and that is the problem I like to have a work around for.

Mansour, thank you for the clarification and the link. I'm going to study that.

I gave you an example to try and because you don't understand it you won't even try it? I'm only making a suggestion from experience.

I might be late to this party, but the menu works fine on my phone. I have a rooted android with a customer rom, but I use the stock browser. just some fyi

Hi Mark,

At this moment it works fine, not becuase I solved this problem yet. I was able to repair the menu with MenuBuilder after help in the forum. So I guess what you see now on the site is the MB version. I am still reading about the touchscreen devices and what they need instead of : hover.
Thanks for watching.

Eric, you did and I appreciate your input as always. I value your helpful posts in the forum highly.
I have two problems with <li onmouseover="">.
1. it looks like a piece of isolated javascript . To make it work for me I need some more information, like I asked in my answer. I am not well educated as it comes to javascript.
(Basicly I am open to all helpful suggestions and willing to try them, because for me it is not only about the result but also about learning).

But more important:
2. It contains the word "mouse" and that is in fact what I try to avoid, because a mouse doesn't work on a touchscreen.

I know there are jquery plugins to tackle this problem but I feel that is the last station I should go to. First of all I wanted to understand what causes the problem and how it can be solved. I am eager to get stragegies, work arounds. Mansours link was a good start for me. I also found the practice of making navigation without lists. And so I am muddling through, althoug the menu on my website is working fine now.

Hope you understand my considertions.

For additional info visit this link Hover: http://youtu.be/7Lz6t5EylyY

Mansour, awesome. Thanks.

For who is reading along I came across this site with Responsive Web Design patterns. It includes also all types of navigation styles.

http://bradfrost.github.io/this-is-responsive/patterns.html