Horizontal Dropdown Navigation Menu for blog

Posted by LAHAUL SETH ~ Comments

Horizontal dropdown navigation menus gives blog readers the convenience of easy blog navigation. If you don't have a navigation bar, then you can use the code given below to create one for your blog.

Paste this code in the head section of your template before </head>.

/* -------- Menu Horizontal Dropdown --------------*/

/* --------- End of Menu Horizontal Dropdown --------*/

The above code is the design of your dropdown menu. Now for the display on your blog, you have to add the following code after the header wrapper portion in the <body> section.




Home
About Us

Drop Menu 1

Sub Drop Menu 1
Sub Drop Menu 2
Sub Drop Menu 3
Sub Drop Menu 4



Drop Menu 2

Sub Drop Menu 1
Sub Drop Menu 2
Sub Drop Menu 3
Sub Drop Menu 4



Drop Menu 3

Sub Drop Menu 1
Sub Drop Menu 2
Sub Drop Menu 3
Sub Drop Menu 4



Drop Menu 4

Sub Drop Menu 1
Sub Drop Menu 2
Sub Drop Menu 3
Sub Drop Menu 4



Drop Menu 5

Sub Drop Menu 1
Sub Drop Menu 2
Sub Drop Menu 3
Sub Drop Menu 4



Drop Menu 6

Sub Drop Menu 1
Sub Drop Menu 2
Sub Drop Menu 3
Sub Drop Menu 4



Drop Menu 7

Sub Drop Menu 1
Sub Drop Menu 2
Sub Drop Menu 3
Sub Drop Menu 4



Drop Menu 8

Sub Drop Menu 1
Sub Drop Menu 2
Sub Drop Menu 3
Sub Drop Menu 4

In this code, change the links and the names according to your needs. You can also experiment with the 1st code by changing the color and font that suits with your blog display.

You can also download the demo html file from here and run it on a web browser before implementing it on your blog.