Custom dropdown select with css and html

Question

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/

Ana · Accepted Answer · 2012-08-21 11:08:46Z

5

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

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

DEMO

edited Aug 21, 2012 at 11:08

answered Aug 21, 2012 at 10:59

Ana

37.2k7 gold badges86 silver badges147 bronze badges

Why does not work if I put a link on that <a></a>? fiddle: jsfiddle.net/RwtHn/1091
– mcmwhfy
CommentedAug 22, 2012 at 6:27
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.
– Ana
CommentedAug 22, 2012 at 8:18
hmmmm this is so weird, it works on chrome and IE8 but does not worknig on firefox ...
– mcmwhfy
CommentedAug 22, 2012 at 8:32
have you tried to click on that links ? is not redirecting to google page how is mentioned in <a "href".
– mcmwhfy
CommentedAug 22, 2012 at 8:38
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.
– Ana
CommentedAug 22, 2012 at 9:45

Add a comment |

Abraham · Accepted Answer · 2012-08-21 11:30:01Z

2

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

edited Aug 21, 2012 at 11:30

answered Aug 21, 2012 at 10:58

Abraham

20.7k7 gold badges35 silver badges40 bronze badges

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

Add a comment |

Collectives™ on Stack Overflow

Custom dropdown select with css and html

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related