• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 251
  • Last Modified:

CSS Dropdown menu

Is there an example on how to create a pure css menu that drops straight down, like an accordion?

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

Open in new window

0
rgranlund
Asked:
rgranlund
  • 3
1 Solution
 
Pedro ChagasWebmasterCommented:
Hi, Why you don't use jQuery?
Try this: http://jqueryui.com/accordion/

The best regards, JC
0
 
Pedro ChagasWebmasterCommented:
Try this one too: http://www.1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials/, lots of examples.
jQuery is very easy to use.

~JC
0
 
COBOLdinosaurCommented:
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.

Cd&
0
 
Pedro ChagasWebmasterCommented:
You have reason.
Use CSS3 is a big risk, because the browsers compatibility.
This example can help you:
http://csswizardry.com/2011/02/pure-css3-accordion/

~JC
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now