In this kind of menu, each menu item produces a dropdown menu on click. But when we click on another menu item, the dropdown for other menu items would close by themselves. Such a menu can easily be made with JQuery.
The following code will help you with this.
Creation Accordion menu just requires some simple effects. Menu items when clicked, toggle to open some submenu items, as told above. When another menu item is selected, the previous menu items will automatically close down accordingly. We will be using JQuery to get the animation effect (for dropdown and closing down) and standard CSS to apply some styles.
We will used <ul><li> (list) in HTML to create the menu and submenu.
<p>Step 1 contains of some other steps that can be defined here.</p>
<h3>Second Step </h3>
<p>Feel free to add some more HTML stuff into this div.</p>
<p>The end is near. Go further to see what happens</p>
Below CSS code I have applied round corner CSS used border-radius property to make looks good.