Skip to content Skip to sidebar Skip to footer
Home / Blog Design / css / menus / navigation menu / Widgets

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

By AUTOSEO Post a Comment
It's just a horizontal menu with CSS sub-tabs and a circular search bar on the right. Such a menu may be useful for users who do not need a complex menu or who prefer not to use a menu that requires a lot of scripts and/or images. It's also quite easy to set up and customize, and to top it all off, it's quite functional.

Visit this demo blog to see this CSS dropdown menu in action

blogger menu, drop down menu, css menu

Before changing anything, if you are using an existing template in the Blogger Template Designer, you should consider making the following changes to the template, otherwise the menu may not display properly:

From your Blogger dashboard, navigate to Templates and click the "Edit HTML" button:


Find this line using CTRL + F:

class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Screen view

Delete the code in red.
Once it is red, you may have several sections, delete the ones you find.

.... then find a similar entry in your model:
/* Cards
--------------------------------------------- */

Delete the code after this note until you see the headings section.

/* Cards
--------------------------------------------- */
.tabs-external {
hidden flood;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) re-motion 0 0 ;
}

#layout .tabs-outer {
flood - visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-down {
below: 0;
}

.tabs-inline .link widget {
display: online login;

difference: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inline .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inline .widget li.select a, .tabs-inline .widget li a:pass {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x shift 0 -100px;
color: $(tabs.selected.text.color);
}
/* headers
--------------------------------------------- */

Then add where the code was removed (instead of the green code):
#crosscol lower { z-index: 200; padding: 0! Important ;}
#crosscol li:pass {position:relative;}
#crosscol ul li {padding: 0! important;}
.tabs-extern {z-index: 1;}
.tabs .widget ul, .tabs .widget ul {top: visible;}
With that done, we can finally add our menu.

How to Add CSS Horizontal Dropdown in Blogger

To add a CSS horizontal menu with submenus to your blog, follow these steps:

Step 1. Go to "Edit HTML" from "Template" and click ]]> paste this CSS code:
/* Horizontal dropdown menu
--------------------------------------------- */
#menuWrapper {
width: 100%; /* menu width */
height: 35px;
left-padding: 14px;
background:#333; /* background color */
border-radius: 10px;
}
.menu {
padding: 0;
difference: 0;
list-style: none;
height: 35px;
position: relative;
z-index: 5;
font family: arial, verdana, sans serif;
}
.menu li: Pass li to {
background: none;
}
.menu li.top { screen: key; float: left ;}
.menu a.top_link {
screen lock;
floats: left;
height: 35px;
line-height: 34px;
color: #cc;
text-decoration: none;
font-family:"Verdana", sans serif;
font-size: 12px; /* font size */
font-weight: bold;
padding: 0 0 0 12px;
cursor: pointer;
}
.menu li a.top_link span {
floats: left;
screen lock;
padding: 0 24px 0 12px;
height: 35px;
}
.menu a.top_link span.down {
floats: left;
screen lock;
padding: 0 24px 0 12px;
height: 35px;
}
.menu li a.top_link:pass, .menu li:pass > a.top_link {color:#fff; }
.menu li:pass { position:relative; z-index: 2;}
.ul menu,
.menu li: hover ul ul,
.menu li:switch ul li:switch ul ul,
.menu li: jump ul li: jump ul li: jump ul ul,
.menu li:ul switch li:ul switch li:ul switch li:ul ul switch
{ position : absolute ; left: -9999px; top: -9999px; width: 0; height: 0; difference: 0; padding: 0; List style: none ;}

.menu li:hover ul.sub {
left: 0;
top: 35px;
background:#333; /* Submenu background color */
padding: 3px;
void: redeem now;
width: 200px;
height: auto;
z-index: 3;
}
.menu li:hover ul.sub li {
screen lock;
height: 30px;
position: relative;
floats: left;
width: 200px;
font-weight: normal;
}
.menu li:hover ul.sub li a{
screen lock;
height: 30px;
width: 200px;
row-height: 30px;
text-indent: 5px;
color: #cc;
text-decoration: none;
}
.menu li ul.sub li a.fly {
/* Submenu background color */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ3xUD22_vYFJC5dIyvBJqBsgv68mPLSlpfjDnY55MVqkQMpbU4e8pbJ7UmHtbvkAc_I21eKFXp0EghyjXHyCHT7gMmwBNceF2PdBueYzHc_hNZXxcrZWTIdrfLo_mtcKykK9tjH9tjGA/s1600/arrow_over.gif) 185px 10px no repeat ;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* mouse background color */
color: #fff;
}
.menu li:jump ul.sub li a.fly:jump, .menu li:jump ul li:jump > a.jump {
/* Mouse background */
background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ3xUD22_vYFJC5dIyvBJqBsgv68mPLSlpfjDnY55MVqkQMpbU4e8pbJ7UmHtbvkAc_I21eKFXp0EghyjXHyCHT7gMmwBNceF2PdBueYzHc_hNZXxcrZWTIdrfLo_mtcKykK9tjH9tjGA/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:scroll down li:scroll down,
.menu li:toggle down li:toggle down li:toggle down,
.menu li:jump ul li:jump ul li:jump ul li:jump,
.menu li:rollover ul li:rollover ul li:rollover ul li:rollover ul li:rollover ul {
left: 200px;
top : -4px ;
background: #333; /* Submenu background color */
padding: 3px;
void: redeem now;
width: 200px;
z-index: 4;
height: auto;
}
#research {
width: 228 pixels; /* Search field width */
height: 50px;
swam - right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/* Search box background */
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxiuWYLB9lZwTzuhhaykcUUyuR0cYBKLJ9Xbk-5Ymv8oh6SMkfz3XkTcgPU99gwgKvz7m7MXt39grLdRDrEzLpDYJpXWzSgW60SnMqu4jqXH5rBd825I8joxbXVAu-H_4kkwzmpIyp_5w/s1600/searchBar1.png) no-repeat;
}
#search bar {
margin-top: 3px;
border : 0px ;
transparent background;
text-align: center;
}


Screen view
Step 2. After adding the code, click "Save Template".

Step 3. Go to Layout > Click Add Tool Link


Step 4. Select "HTML/JavaScript" and paste the following HTML code into the empty box:


How to customize the navigation menu

- Replace the blue and red text with your own links and titles.
- if you need more icons, add a line like this above

  • Link URL " class="top_link"> Title

    • - if you want to add a tab with sub-tabs, add this code:

  • Link URL " class="top_link"> Title


    • - and if you want any of the other subtabs to have subtabs, remove the orange line and replace it with code like this:

  • Link URL " class="fly"> Submenu title


    • And that's it... Now "save" your widget and enjoy this new CSS dropdown menu!

    Post a Comment for "Create Horizontal Navigation Menu With Drop Down Submenus Using CSS"