Using anchor without href just to get that :hover effect?

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

you can use <a href="#">...</a> or <a href="javascript:;">...</a>

without href attribute is an invalid markup

Answer 2

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).

Answer 3

You don't have to have the element be an anchor, as far as I know the :hover psuedo-class works on any valid DOM element. If you are concerned, you can add href="#" to the tag.

Answer 4

1. Looks valid to me, but unless you need it to work in IE6 or something, earlier, there's no reason you couldn't just use span.

2. The href attribute is optional on a elements.
   I don't see why search engines would expect any optional attribute to exist, Also, in the spirit of being liberal with what you accept. Even if it were compulsory, I'd imagine any decent search engine would be able to cope.

Answer 5

<a href="#"> would be fine.

But you might want to point the href to a back-up page instead, so that those without Javascript could still navigate to a page containing links to the sub-menu options. Then add an onclick handler that returns false, to prevent Javascript-enabled browsers (who can see your menu) from following the link if clicked.

That way, you've covered all your bases, as well as justifying to yourself why that href attribute is there :)