Create a dropdown menu? How to?

I am completely new to creating websites.  I've been able to create the 
pages I want on it.  However I want to create a drop down menu that is for 
the main page of"Child Sponsorship" being able to select either "Child 
Welfare Sponsorship" or "Child Education Scholarship".
How do I accomplish this?

Here is the HTML:

<b:widget id='PageList1' locked='false' title='' type='PageList'>
          <b:widget-settings>
            <b:widget-setting name='pageListJson'><![CDATA[{'home': 
{'href': 'http://www.sustainedhopeghana.org/', 'title': 'Home', 'position': 
0}, '3139309827136738222': {'href': 
'http://www.sustainedhopeghana.org/p/about.html', 'title': 'About', 
'position': 1}, '5906953957111194714': {'href': 
'http://www.sustainedhopeghana.org/p/newsletter.html', 'title': 
'Newsletter', 'position': 2}, '4266646567106094470': {'href': 
'http://www.sustainedhopeghana.org/p/soccer.html', 'title': 'Kodzobi Golder 
Warriors FC', 'position': 3}, '4144182543357797860': {'href': 
'http://www.sustainedhopeghana.org/p/child-sponsorship.html', 'title': 
'Child Education Scholarships', 'position': 4}, '5557923650054063170': 
{'href': 
'http://www.sustainedhopeghana.org/p/child-welfare-sponsorship.html', 
'title': 'Child Welfare Sponsorship', 'position': 5}, 
'4740951275126157068': {'href': 
'http://www.sustainedhopeghana.org/p/store.html', 'title': 'Merchandise', 
'position': 6}}]]></b:widget-setting>
            <b:widget-setting name='homeTitle'>Home</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <option b:whitespace='remove' expr:value='data:link.href'>
            <b:attr cond='data:link.isCurrentPage' name='selected' 
value='selected'/>
            <data:link.title/>
          </option>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>
    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <li>
            <b:class cond='data:link.isCurrentPage' name='selected'/>
            <a expr:href='data:link.href'><data:link.title/></a>
          </li>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
        </b:widget>
      </b:section>
      <b:section class='tabs' id='crosscol-overflow' name='Cross-Column 2' 
showaddelement='no'/>
    </div>
    </div>
    <div class='tabs-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

    <div class='main-outer'>
    <div class='main-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>

    <div class='fauxborder-left main-fauxborder-left'>
    <div class='fauxborder-right main-fauxborder-right'/>
    <div class='region-inner main-inner'>

      <div class='columns fauxcolumns'>

        <div class='fauxcolumn-outer fauxcolumn-center-outer'>
        <div class='cap-top'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        <div class='fauxborder-left'>
        <div class='fauxborder-right'/>
        <div class='fauxcolumn-inner'>
        </div>
        </div>
        <div class='cap-bottom'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        </div>

        <div class='fauxcolumn-outer fauxcolumn-left-outer'>
        <div class='cap-top'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        <div class='fauxborder-left'>
        <div class='fauxborder-right'/>
        <div class='fauxcolumn-inner'>
        </div>
        </div>
        <div class='cap-bottom'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        </div>

        <div class='fauxcolumn-outer fauxcolumn-right-outer'>
        <div class='cap-top'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        <div class='fauxborder-left'>
        <div class='fauxborder-right'/>
        <div class='fauxcolumn-inner'>
        </div>
        </div>
        <div class='cap-bottom'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        </div>

        <!-- corrects IE6 width calculation -->
        <div class='columns-inner'>

        <div class='column-center-outer'>
        <div class='column-center-inner'>
          <b:section class='main' id='main' name='Main' showaddelement='no'>
            <b:widget id='Blog1' locked='true' title='Blog Posts' 
type='Blog'>

-- 
You received this message because you are subscribed to the Google Groups "Blogger Developer Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/bloggerdev.
For more options, visit https://groups.google.com/d/optout.