Horizontal menu with sub-tabs in two columns for Blogger

This is a nice horizontal menu with two column submenus, created by CSS without any writing.

The "advantage" is that the sub-items are not as long as they are in two columns in line, as they are clean and have less space. You can see an example here.

• This is a tab 1 topic.
• The title of Box 2 is here
• This is the title of Box 3
  • Captions 3.1:
  • Captions 3.2:
  • Captions 3.3:
  • 3.4 Captions
  • Captions 3.5:
  • Captions 3.6:
• This is the title of Box 4
  • Captions 4.1:
  • Captions 4.2:
  • Captions 4.3:
  • Captions 4.4:
  • Captions 4.5:
  • Captions 4.6:
• Box 5 titles here
  • 5.1 captions
  • Captions 5.2:
  • Captions 5.3:
  • Captions 5.4:
  • Captions 5.5:
  • Captions 5.6:
  • Captions 5.7:
  • Captions 5.8:
• Enter the title of Box 6 here

Add a horizontal menu to Blogger with two-column submenus

Step 1. Go to " Layout " section in Blogger: "Page Content" section.

• Click the " Add widget " link below the title image
• Select " HTML / JavaScript " from the list of puzzles

Step 2 Copy և paste this complete code into your gadget. Please note. Empty the "Title" section of this puzzle.

• This is a tab 1 topic.


• The title of Box 2 is here


• This is the title of Box 3
  
  
  
  • Captions 3.1:
  
  
  • Captions 3.2:
  
  
  • Captions 3.3:
  
  
  • 3.4 Captions
  
  
  • Captions 3.5:
  
  
  • Captions 3.6:
  
  
  
  


• This is the title of Box 4
  
  
  
  • Captions 4.1:
  
  
  • Captions 4.2:
  
  
  • Captions 4.3:
  
  
  • Captions 4.4:
  
  
  • Captions 4.5:
  
  
  • Captions 4.6:
  
  
  
  


• Box 5 titles here
  
  
  
  • 5.1 captions
  
  
  • Captions 5.2:
  
  
  • Captions 5.3:
  
  
  • Captions 5.4:
  
  
  • Captions 5.5:
  
  
  • Captions 5.6:
  
  
  • Captions 5.7:
  
  
  • Captions 5.8:
  
  
  
  


• Enter the title of Box 6 here

Customize the main tab by changing the title of the tab to whatever you want. Include each URL if you want it to be "clickable". If not, you can check your # http: // URL HERE.com .

You can add or remove as many tabs as you want, just make sure you copy the entire code for the additional tabs you want.

Enter the title of Box 7 here

• Captions 7.1:


• Captions 7.2


• Captions 7.3:

Step 3. Let's take a step forward և add CSS styles to our template

• Go to Template > Edit HTML

• Click on the arrow next to it ...

• Then click anywhere in the code area և search with the CTRL + F - ]]> keys Markers] above ]]> Add this code:

/ * Horizontal menu with 2 columns
-------------------------------------------------- * /
# Tutorial:
Width: 940 pixels;
Height: 37 pixels;
Background image: -mos-linear-gradient (above, # 666666, # 000000);
Wallpaper.
Procedure Filter Filter the DXImageTransform.Microsoft.Gradient (gradientType = 0, startColorStr = # 666666, endColorStr = # 000000);
Bottom edge: 1 pixel solid # 666666;
Boundary: 1 pixel solid # 666666;
Margins: 0 heads; Charging: 0 motors;
Many are hidden;
a
# Top casing.
Width: 940 pixels;
Height: 40 pixels;
Automatic margin cleaning 0;
Sliding floor 0 automatic;
a
Simply.
Both are clear.
height less than 0;
Line height: 0.0;
Font size: 0;
a
# On.
Width: 100%;
a
#op, #op
Floor plate 0;
Sharp margin 0;
There are no detailed metaphors.
a
# To:
Right Edge: 1 pixel solid # 333333;
Text alignment: left;
Display block display;
Text formatting. there is none;
Screen: 10 pixels 12 pixels 11 pixels;
Font: bright 14 pixel antenna;
No text changes are required;
Color #ee off;
a
# Active: floats.
Background: # 000000;
Color paint # F6F6F6;
a
# Top A. submenu.
Background Image URL (http://3.bp.blogspot.com/-TkveEnZCoIw/Uat7PEv8kBI/AAAAAAADsY/iqVPPTJzvUs/s1600/arrow_white.gif);
Prehistory repetition. without repetition;
Screen: 10 pixels 24 pixels 11 pixels 12 pixels;
Background: center right;
a
# On.
The other masters swim;
The place of relatives of relatives;
a
# On.
Location: Move! Force;
Automatic width;
a
#Top Lee Wool, #Top Wool Lee.
Width: 300 pixels;
a
# To:
Text alignment: left;
Screen: 6 pixels 15 pixels;
Font size: 13 pixels;
Font weight - ideal;
No text changes are required;
Font family: Arial, sans-serif;
Without Borders;
a
# To:
z-index: 100;
The area is perfect;
Lack of screen display;
Bright background color # F1F1F1;
gra-80 pixels left margin;
Screen: 10 pixels 0;
Boundary radius: 0 pixels 0 pixels 6 pixels 6 pixels;
Bergkas 0 0pp 2px rgba (0,0,0,0.6);
Filter: alpha (low light = 87);
Clear transparency.87;
a
# To:
Width: 150 pixels;
The other masters swim;
Sharp margin 0;
Floor plate 0;
a
# Above: move ul, #in li.hvr ul.
Display block display;
a
# Վերև ՝ moves ul a, #top li.hvr ul a.
Color paint # 333;
Background color: clear;
Text formatting. there is none;
a
#Far! Move.
Location of text settings. Force;
Light color # 444444! Possible;
a

• Get this rule now (CTRL + F)

/ * Add:

• A few short lines are below.

/ * Add:
-------------------------------------------------- * /

• And below this short line, delete the following code until you reach:

/ * Column:
-------------------------------------------------- * /

• Add it instead of your deleted code.

# Cross ul {z-index: 200; Floor tiles 0! It is possible.
# cross cross
#crosscol ul li {Fill: 0! Force;
External tab {z-index: 1;
Tab-in {includes 0 0px;

See this screenshot for more information:

Step 4. The last step is to keep the template ready.

Visit your blog to see a nice navigation menu under the title.
If you have any questions or need help, leave a comment below.