- Every Blogger Wish To Make Their Blog More Winning, By Adding Drop_Down Menu To Their Blog...
- But, If you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly...
- The Menu Can't DropDown because of Template Design.So, You have To make some changes to Template Design...
Note...
How To Avoid Problem Of Dropdown Menu..?
- At First, Login to Your Blogger Account...
- Go To Blogger Dashboard...
- Click On " Template " Option...
- Click On " Edit HTML " Option...
- Now Find For (clrt+F) In Your Template...<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
- Remove the code in red, You may have many parts as the one in red, delete all you find...
- Then find Bellowed section in your template...
----------------------------------------------- */
- Remove all that is within it, until you reach to the Headings part...
- Then add this to where the code has been removed( Pest Between Tabs...&...Headings )...
- Just Save Your Template...
/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0; }
#layout .tabs-outer { overflow: visible; }
.tabs-cap-top,
.tabs-cap-bottom { position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color); }
.tabs-cap-bottom { bottom: 0; }
.tabs-inner .widget li a {
display: inline-block;
margin: 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-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color); }
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px; color: $(tabs.selected.text.color); }
/* Headings ----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0; }
#layout .tabs-outer { overflow: visible; }
.tabs-cap-top,
.tabs-cap-bottom { position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color); }
.tabs-cap-bottom { bottom: 0; }
.tabs-inner .widget li a {
display: inline-block;
margin: 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-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color); }
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px; color: $(tabs.selected.text.color); }
/* Headings ----------------------------------------------- */
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}
You Have done this,Now You can finally add DropDown_menu to
your blog...
- If You have any Problem then Please make a comment....Thanks For Visit....