Question

If you look here and hover over “PONUDA”, you will get that nice hover effect. The thing is that all li’s have anchor in it that do have href value, so when you click on them some page will be opened. But because i have some sub menu shown when you hover over “PONUDA”, i dont want it to be linked but i still want to have that hover effect. So thats why the code is like this:

<a>PONUDA</a>

Tbh i have never thought about using anchor without href value, so few questions:

1. How valid is this technique for using :hover state of the anchor? I know i could use js, but i just want to know is it ok solution for when you just want to use that pseudo selector :hover, so just css without js.
2. What about search engines? What do they do when they reach anchor tag, and they see that it does not have href? Do they expect every anchor tag to have href?

I know it a silly question, but any reference to this “problem” would be great!

Answer 1

Most modern browsers support using the :hover pseudo-class on tags other than a, so you could just apply them to your li tags, and even with Internet Explorer there are plenty of workarounds. This workaround is quite a nice one if you don’t want to use any Javascript.

What’s nice about using :hover on the li elements themselves, in my opinion, is that the hovered state remains even when you move to one of the nested list elements (i.e. submenu elements). If you don’t quite want that effect, though, I’d suggest sticking with the a tags (though doing as Pekka says).