CSS Dropdown menu

Posted on 2013-02-01
Last Modified: 2013-02-16
Is there an example on how to create a pure css menu that drops straight down, like an accordion?

<div id="top_menu">
			<li><a href="#">PRODUCTS</a>
							<li><a href="#">MicroPro 200</a></li>
							<li><a href="#">Aviator</a></li>
					<li><a href="#">CABINETS</a></li>
					<li><a href="#">ACCESSORIES</a></li>
			<li><a href="#">EXPERIENCE</a></li>
			<li><a href="#">PATRICK</a></li>
			<li><a href="#">CONTACT</a></li>

Open in new window

Question by:rgranlund
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3

Expert Comment

by:Pedro Chagas
ID: 38845539
Hi, Why you don't use jQuery?
Try this:

The best regards, JC

Expert Comment

by:Pedro Chagas
ID: 38845548
Try this one too:, lots of examples.
jQuery is very easy to use.

LVL 53

Expert Comment

ID: 38845610
I have not seen a pure CSS implementation of an accordion menu.  You need scripting for the effect.  However I will be listening in case there is a CSS implementation that I missed.


Accepted Solution

Pedro Chagas earned 500 total points
ID: 38845724
You have reason.
Use CSS3 is a big risk, because the browsers compatibility.
This example can help you:


Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Node.js 11 76
How do I wrap text in dialog window 6 34
No option to replace table data in phpmyadmin using CSV file import 11 43
Joomla Editing 3 21
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses how to implement server side field validation and display customized error messages to the client.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question