Solved

CSS Dropdown menu

Posted on 2013-02-01
4
236 Views
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">
	<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
Comment
Question by:rgranlund
  • 3
4 Comments
 
LVL 3

Expert Comment

by:Pedro Chagas
Comment Utility
Hi, Why you don't use jQuery?
Try this: http://jqueryui.com/accordion/

The best regards, JC
0
 
LVL 3

Expert Comment

by:Pedro Chagas
Comment Utility
Try this one too: http://www.1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials/, lots of examples.
jQuery is very easy to use.

~JC
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 3

Accepted Solution

by:
Pedro Chagas earned 500 total points
Comment Utility
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now