Create Submenu using CSS / HTML

0
399

Navigation or Menu is one of the necessary parts in websites. They guide your users to travel in your website easily. Without proper guidance the talented person may fail to achieve his/her goal likewise without proper Menu a good website may fail to attract visitors. There will be many pages in your website but without proper menu your visitor find it difficult to use your website. So surely you will understand how Menu is important to websites.

Menu can be differentiated into Primary menu, Secondary menu and Submenu (or) Dropdown menu. Here in this post I am going to tell you how to create Submenu using CSS. In CMS like wordpress you can create menu and sub menu easily in admin page. To learn create menu in wordpress please read how to create menu in wordpress.

LIVE DEMO DOWNLOAD

Let’s start to create sub menu. Before that to understand this tutorial you must know the HTML and CSS.

Step 1:

In first step you should create your html for menu and submenu. Here I am creating html code for menu and submenu using tag <ul><li>.

I used five menu items Home, About Us, Services, Blog, and Contact Us. In that for Services I used five Submenus and for blog used three Submenus. For placing Submenu below the main menu I used Sub menu <ul></ul> tag inside the <li></li> tag of respective main menu. To understand it clearly please analyse the below code,

 

Step 2:

Create CSS file for the Submenu html page. I give the CSS file for that html page below please goes through it. In that I set the menu and submenu class to position: absolute. First set display: none for submenu and when place mouse on respective <li> give display: block for that submenu.

That’s Simple likewise you can create many submenu using only html and css. Thereby you can avoid using JavaScript for creating submenu.

That’s Simple likewise you can create many submenu using only html and css. Thereby you can avoid using JavaScript for creating submenu.

LEAVE A REPLY