Multi-level menu for Simplex Newspaper II

SimplexBlognews and Simplex Newspaper II are similar templates ,they has the same layout ,so we can make multi-level menu for Simplex Newspaper II as the way we did with Simplex Blognews .




1,Open template in any word editor you have ,or in Blogger (go to Design tab ---> edit HTML ----> checked Expand Widget Templates )

2,find this code

             <ul>
                 <b:section id='topcat' showaddelement='no'>
                     <b:widget id='LinkList1' locked='false' title='Top Category' type='LinkList'>
                         <b:includable id='main'>
                             <b:loop values='data:links' var='link'>
                                 <li><a expr:href='data:link.target'><data:link.name/></a></li>
                             </b:loop>
                         </b:includable>
                     </b:widget>           
                 </b:section>           
             </ul>
         
and change it to
<ul>
                 <li>
                     <a href="link to category">Home</a>
                 </li>
                 <li>
                     <a href="link to category">World News</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>

                 <li><a href="link to category">Travel</a></li>
                 <li><a href="link to category">Sports</a></li>

                 <li><a href="link to category">Finance</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>
                
                 <li><a href="link to category">Entertainment</a></li>
                 <li><a href="link to category">Business</a></li>                    
             </ul>
Remember to change the text in bold to your category and sub category . Link to category and sub category has structure : http://yourblog.blogspot.com/search/label/your-category

If you want to make multi-level menu in page navigation (About us ,contact us ....) ,you can also replace the code
<div id="navpages">
             <ul>
                 <b:section id='page' showaddelement='yes'>
                     <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
                          <b:includable id='main'>
                             <b:loop values='data:links' var='link'>
                                 <li><a expr:href='data:link.href'><data:link.title/></a></li>
                             </b:loop>
                         </b:includable>
                     </b:widget>
                 </b:section>               
             </ul>
             <div class="clear"></div>
         </div>
with the code has structure like this
<ul>
                 <li>
                     <a href="link to category">Home</a>
                 </li>
                 <li>
                     <a href="link to category">World News</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>

                 <li><a href="link to category">Travel</a></li>
                 <li><a href="link to category">Sports</a></li>

                 <li><a href="link to category">Finance</a>
                     <ul class="children">
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                         <li><a href="link to subcategory">Category</a></li>
                     </ul>
                 </li>
                
                 <li><a href="link to category">Entertainment</a></li>
                 <li><a href="link to category">Business</a></li>                    
             </ul>

3,The most important step :
find this code :
#navcats {
    width:970px;
    background: url(http://img651.imageshack.us/img651/9570/bggradientlines.gif) repeat;
    border-bottom:1px solid #efefef;
    position:relative;
    z-index:1;
}
and change z-index :1 to z-index:999
z-index:999 will make this menu float on others elements . If you don't change this value ,you will see multi-level menu is hidden by other elements .

That's all .Save template and you are done .