- First, change the menu and adjust the settings tab menu page will be displayed
- Second, open the template editor by clicking on the 'Template'> 'Edit HTML'>'Proceed'> 'Expand Widget Templates'.
- Third, find this code ]]></b:skin> and then paste the following CSS code right on it.
.tabs-inner .widget li ul {
z-index: 100;
position: absolute;
left: -999em;
height: auto; margin: 0; padding: 0;
border: 1px solid
#999999;
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
-moz-border-radius:
0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}
.tabs-inner .widget li:hover ul, .tabs-inner .widget
li.sfhoverul {
left: auto;
}
.tabs-inner .widget li li a:hover, .tabs-inner .widget li
lia:active {
color: #ffffff;
background: rgb(51, 102, 153);
}
.tabs-inner .widget li ul a {
display: block;
padding-left: 1.25em; padding-right: 1.25em;
margin-left: 0px;
margin-right: 0px; border: none;
color: #000000;
background: rgb(243, 244, 246);
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
width: 220px;
}
- Fourth, Find <li><a expr:href='data:link.href'><data:link.title/></a></li> code andlook at <b:/loop> code contained a few lines below it. Now, insert the following code in the format right under <b:/loop>.
<li><a href='#'>Menu</a>
<ul>
<li><a
href='URL'>Sub Menu 1</a></li>
<li><a
href='URL'>Sub Menu 2</a></li>
<li><a
href='URL'>Sub Menu 3</a></li>
</ul>
</li>
Note: Change the URL matches the URL that will be used in
the sub menu and adjust the 'Menu' and 'Sub Menu' in accordance with the text
to be displayed. And when it will make some pull down menu, then repeatedly
copy the code below and then adjust the settings in the same way as before.
- Fifth, Save Template.