1

I'm trying to create a custom drop-down menu with html and css only. I'm wondering if is possible to work with focus instead of hover? now is on hover and works but I want to expand that select onclick.

Here I have a fiddle example: http://jsfiddle.net/RwtHn/1084/

Improve this question

2 Answers 2

Reset to default
5

Don't use hover on the li, use hover on the a:

a:hover + ul, a:focus + ul, a:active + ul {}

DEMO

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Why does not work if I put a link on that <a></a>? fiddle: jsfiddle.net/RwtHn/1091
Works like this jsfiddle.net/thebabydino/RwtHn/1098 Like I've said in my answer, don't use :hover and especially :focus on li, use it on the link. And have tabindex='1' on the link as well.
hmmmm this is so weird, it works on chrome and IE8 but does not worknig on firefox ...
have you tried to click on that links ? is not redirecting to google page how is mentioned in <a "href".
Oh, you mean the ones in the submenu? The way you've written it, it's a relative url. Use it with http:// in front of it. This won't redirect in jsFiddle iframe either (from the jsFiddle iframe you can open it in a new tab if you add target='_blank' jsfiddle.net/thebabydino/RwtHn/1101), but it will work in your project.
2

EDIT: Here's a demo: http://jsfiddle.net/RwtHn/1087/
Wow. I'm surprised this is even possible with just HTML/CSS.

Improve this answer

2 Comments

@Abraham Why does not work if I put a link on that <a></a>? fiddle: jsfiddle.net/RwtHn/1091
What's wrong? It works when I click on the links (jsFiddle stops the page from loading, though)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.