5

We have a requirement not to use javascript for dropdown menus. This requirement is due to maitain SEO value.

Is there any way to achieve this with purely css and make it work on all browsers.

I tried with li mouseover and mouseout , but its not working in IE7. its working only in Firefox.

Can you please advice or give directions on good solution.

thanks

Improve this question
5
  • 1
    While maybe possible, I just wonder if it's realistic to enforce a policy of "no javascript". When you don't want to use JavaScript, you will miss out a lot of modern features of the Web 2.0 world. An option could be to look for features in HTML5, but many older browsers won't support that. Commented Nov 1, 2010 at 15:47
  • @workshop , but we have a SEO requirement from business like that. Commented Nov 1, 2010 at 15:55
  • I know. In my experience, with that kind of requirements I just tend to say "No, it's not possible." (Even if it is possible!) Why? Because you make things extremely difficult when you want these kinds of features without any scripting options. "It can be done" is not a valid excuse for doing things in a slow and painful way. CSS is extremely powerful, but these kinds of tricks require lots of experience to maintain. Commented Nov 1, 2010 at 16:01
  • @Workshop , you are right , we argued a lot on these with the requirements team, but they didn't agree. thanks for all your inputs. Commented Nov 1, 2010 at 16:04
  • @gov, which is actually all the more reasons to claim it's not possible, until proven otherwise. I consider time that developers spend on designing websites and applications to be very valuable. There's a reason why RAD development tools have become so popular, simply because we're expensive! When SEO adds these kinds of restrictions, you should point out that this would delay development considerably since less help will be available, thus costs to develop will skyrocket. I therefor would say "impossible" since the time spent on such solutions would become too costly. Commented Nov 2, 2010 at 8:41

4 Answers 4

Reset to default
6

Yes it is.

see: http://www.cssplay.co.uk/menus/dropdown.html

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

Comments

4

You can do it just with CSS

#item {
    display: none;
}

#item:hover {
    display: block
}

Also have a look here:

http://lwis.net/free-css-drop-down-menu/

You might face an issue with IE6 for hover over HTML element different of so you can use this hack/fix

http://www.xs4all.nl/~peterned/csshover.html

I tested this: http://lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.html

works under IE 6/7/8, tested with IETester

Improve this answer

Comments

3

Maybe this would work for you

http://www.cssplay.co.uk/menus/final_drop.html

Improve this answer

Comments

2

What about plain HTML?

<select name="myDropdown">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
Improve this answer

2 Comments

I think he meant for a website menu, not for selecting data in a form.
Maybe you can try something like this: exploding-boy.com/images/EBMenus/menus.html

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.