title: How can I add a drop down menu to my big cartel site?
body: <p>I would like to add a dropdown menu to my big cartel site. </p>
  
  <p>On Big Cartel you create categories using Big Cartel's dashboard. These categories can be used to create a drop down menu. This much I know. While trying to adjust the code, I noticed Big Cartel's category options are going into the sub-navigation as a drop down.  </p>
  
  <p>I want the sub-navigation to appear as a drop down navigation menu under the navigation link "Jewelry". It would be listed like this:</p>
  
  <p>Jewelry</p>
  
  <p>-- Earrings</p>
  
  <p>-- Necklaces and sets</p>
  
  <p>-- Rings</p>
  
  <p>-- Arm candy</p>
  
  <p>A similar dropdown menu design I am going for is like one on www.fashionative.com "Accessories".</p>
  
  <p>Here is the code for my layout</p>
  
  <pre><code>{{ ---------------------------BEGIN HEADER NAVIGATION--------------------------- }}                        
        {% capture Main_Header_Links %}
  
  
               {% assign: current_page = page.name %}
  
             {% for page in pages.all %}
             {% unless page.name contains '-hide-' or page.name contains '-footer-' or page.name contains '-sidebar-' or page.name contains '-subnav-' or page.name contains '-content_block-'  %}
  
                {% if page.name == current_page %}
                     &lt;li class="block current-page"&gt;
              {% else %}    
                    &lt;li class="block"&gt;{% endif %}&lt;a href="{{ page.url }}"&gt;&lt;span&gt;{{ page.name }}&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
                                       {% endunless %}
               {% endfor %}
  
                {% if page.full_url contains '/contact' %}
              &lt;li class="current-page"&gt;
              {% else %}
              &lt;li&gt;
              {% endif %}
                            {{ pages.contact | link_to }}
                            &lt;/li&gt;
  
  
              {% endcapture %}                          
  
  
    {% capture Category_Links %}           
  
          {% for category in categories.all %}
          {% assign parent_cat_name = category.name %}
          {% assign parent_cat_url = category.url %}
          {% capture sub_cat_list %}
              {% for cat2 in categories.active %}
              {% unless cat2.name == parent_cat_name %}
                  {% capture parent_cat_string %}{{ parent_cat_name }} - {% endcapture %}
                            {% capture parent_cat_url_string %}{{ parent_cat_url }}-{% endcapture %} 
                  {% if cat2.name contains parent_cat_name %}
                      {% assign has_sub_cats = 'true' %}
                      {% capture new_sub_cat_name %}{{ cat2.name | replace_first: parent_cat_string, "" }}{% endcapture %}
      {% if cat2.url contains parent_cat_url_string %}&lt;li&gt;{{ cat2 | link_to: new_sub_cat_name }}&lt;/li&gt;{% endif %}
                  {% endif %}
              {% endunless %}
              {% endfor %}
          {% endcapture %}
  
          {% unless category.name contains ' - ' %}
                            &lt;li&gt;&lt;a href="{{ category.url }}"&gt;&lt;span&gt;{{ category.name }}&lt;/span&gt;&lt;/a&gt;{% if has_sub_cats == 'true' %}&lt;ul id='sub-categories'&gt;&lt;div id='subcat-container'&gt;{{ sub_cat_list }}&lt;/div&gt;&lt;/ul&gt;{% endif %}&lt;/li&gt;
          {% endunless %}
  
          {% assign has_sub_cats = 'true' %}          
      {% endfor %}
  
    {% endcapture %}   
  
  
          {% capture Alternate_Category_Links %}           
  
          {% for category in categories.all %}
          {% assign parent_cat_name = category.name %}
          {% capture sub_cat_list %}
              {% for cat2 in categories.active %}
              {% unless cat2.name == parent_cat_name %}
                  {% capture parent_cat_string %}{{parent_cat_name}} - {% endcapture %}
                  {% if cat2.name contains parent_cat_name %}
                      {% assign has_sub_cats = 'true' %}
                      {% capture new_sub_cat_name %}{{ cat2.name | replace_first: parent_cat_string, "" }}{% endcapture %}
                      &lt;li&gt;{{ cat2 | link_to: new_sub_cat_name }}&lt;/li&gt;
                  {% endif %}
              {% endunless %}
              {% endfor %}
          {% endcapture %}
  
          {% unless category.name contains ' - ' %}
                             {% if page.full_url contains 'product' or page.full_url contains 'category' or page.full_url contains 'artist'  %}
                     &lt;li class="current-page"&gt;
              {% else %}    
                       &lt;li&gt;{% endif %}&lt;a href="{{ category.url }}"&gt;&lt;span&gt;{{ category.name }}&lt;/span&gt;&lt;/a&gt;{% if has_sub_cats == 'true' %}&lt;ul class='category-dropdown'&gt;{{ sub_cat_list }}&lt;/ul&gt;{% endif %}&lt;/li&gt;
          {% endunless %}
  
          {% assign has_sub_cats = 'false' %}          
      {% endfor %}
  
    {% endcapture %}                     
  
  
  
            &lt;div id="header-navigation"&gt; 
              &lt;ul&gt;  
  
              {% if page.permalink contains 'home'  %}
                     &lt;li class="current-page"&gt;
              {% else %}    
                       &lt;li&gt;{% endif %}&lt;a href="/"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
                       {% if page.full_url contains '/product' or page.full_url contains 'category' or page.full_url contains 'artist' or page.full_url contains '/cart' or page.full_url contains '/cart' or page.full_url contains '/new' or page.full_url contains '/sale' or page.full_url contains '/latest'   %}
                     &lt;li class="current-page"&gt;
              {% else %}    
                       &lt;li&gt;{% endif %}&lt;a href="/products"&gt;&lt;span&gt;Jewelry&lt;/span&gt;&lt;/a&gt;
                         {% if Categories_in_Nav_Display contains 'down' %}&lt;ul class="category-dropdown"&gt;{% for page in pages.all %}{% if page.name contains '-subnav-' or page.name contains '-sidebar-' %}&lt;li&gt;&lt;a href="{{ page.url }}"&gt;&lt;span&gt;{{ page.name | remove: '-sidebar-' | remove: '-subnav-' }}&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;{% endif %}{% endfor %}{{ Category_Links }}&lt;/ul&gt;{% endif %}
                       &lt;/li&gt;
                {% if Categories_in_Nav_Display contains 'ain' %}{% for page in pages.all %}
                       {% if page.name contains '-subnav-' or page.name contains '-sidebar-' %}
                       {% if page.full_url contains 'product' or page.full_url contains 'category' or page.full_url contains 'artist' or page.full_url contains '/cart'  %}
                     &lt;li class="current-page"&gt;
              {% else %}    
                       &lt;li&gt;{% endif %}&lt;a href="{{ page.url }}"&gt;&lt;span&gt;{{ page.name | remove: '-sidebar-' | remove: '-subnav-' }}&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                       {% endif %}{% endfor %}
                       {{ Alternate_Category_Links }}
                  {% endif %}      
  
                       {{ Main_Header_Links }}            
  
               &lt;/ul&gt;    
             &lt;/div&gt;
  
    {{ ---------------------------END HEADER NAVIGATION--------------------------- }}            
  
  
  
  
  
  &lt;/div&gt;
  
         &lt;/div&gt;
  
  
      &lt;/div&gt;          
  {{ ---------------------------END HEADER AREA--------------------------- }}  
  
  
              {{ --BEGIN ERROR DISPLAY-- }}
  
          &lt;noscript&gt;
            &lt;div class="error" id="error"&gt;
              &lt;ul&gt;
                &lt;li&gt;JavaScript must be enabled to use this store!&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/noscript&gt;{% if errors != blank %}
          &lt;div id="error" class="error"&gt;
            &lt;ul&gt;{% for error in errors %}
              &lt;li&gt;&lt;u&gt;Error:&lt;/u&gt; {{ error }}&lt;/li&gt;{% endfor %}&lt;/ul&gt;
          &lt;/div&gt;{% endif %}
  
        {{ --END ERROR DISPLAY-- }}
  
        &lt;div id="contents"&gt; 
  
          {{ ------------BEGIN SUB-NAVIGATION------------------- }} 
  
  {% capture Sub_Navigation %}        
   &lt;div id="sub-navigation" &gt;
  
            &lt;div id="categories"&gt;
  
          {% capture Category_Links %}
  
              {% for page in pages.all %}
              {% if page.name contains '-sidebar-' or page.name contains '-subnav-' %}
      &lt;li&gt;&lt;a href="{{ page.url }}"&gt;&lt;span&gt;{{ page.name | remove: '-sidebar-' | remove: '-subnav-' }}&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              {% endif %}
     {% endfor %}
  
          {% for category in categories.all %}
          {% assign parent_cat_name = category.name %}
          {% capture sub_cat_list %}
              {% for cat2 in categories.active %}
              {% unless cat2.name == parent_cat_name %}
                  {% capture parent_cat_string %}{{parent_cat_name}} - {% endcapture %}
                  {% if cat2.name contains parent_cat_name %}
                      {% assign has_sub_cats = 'true' %}
                      {% capture new_sub_cat_name %}{{ cat2.name | replace_first: parent_cat_string, "" }}{% endcapture %}
                            &lt;li&gt;&lt;span&gt;{{ cat2 | link_to: new_sub_cat_name }}&lt;/span&gt;&lt;/li&gt;
                  {% endif %}
              {% endunless %}
              {% endfor %}
          {% endcapture %}
  
          {% unless category.name contains ' - ' %}
              &lt;li&gt;&lt;a href="{{ category.url }}"&gt;&lt;span&gt;{{ category.name }}&lt;/span&gt;&lt;/a&gt;{% if has_sub_cats == 'true' %}&lt;ul class="sub-categories"&gt;&lt;div id="subcat-container"&gt;{{ sub_cat_list }}&lt;/div&gt;&lt;/ul&gt;{% endif %}&lt;/li&gt;
          {% endunless %}
  
          {% assign has_sub_cats = 'false' %}          
      {% endfor %}
  
                    {% endcapture %}
  
  
      &lt;ul class="categories-list"&gt;
        &lt;li&gt;{{ Category_Nav_Title_Text }}&lt;/li&gt;     
  &lt;li&gt;&lt;a href="/products"&gt;&lt;span&gt;ALL&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      {{ Category_Links }}
      &lt;/ul&gt;
  
              &lt;/div&gt;
  
             {{ --BEGIN SEARCH-- }}
  
            {% capture search_form %}
            &lt;div id="search" &gt;
              &lt;form class="form-search" name="search" action="/products" method="get"&gt;
                &lt;input id="search-input" name="search" type="text" placeholder="Search" /&gt;
                &lt;button id="search-submit" name="search-submit" type="submit" title="Search"&gt;&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
         {% endcapture %}
              {{ search_form }}
  
            {{ --END SEARCH-- }}
  
  &lt;/div&gt;
  {% endcapture %} 
  
  
   {% if page.full_url contains '/product' or page.full_url contains '/category' or page.full_url contains '/artist' or page.full_url contains '/cart' or page.full_url contains '/new' or page.full_url contains '/sale' or page.full_url contains '/latest' %}                        
  {{ Sub_Navigation }}        
   {% endif %}       
  
  
  {{ ------------END SUB-NAVIGATION------------------- }} 
  
  &lt;div id="main"&gt;
    &lt;div id="main-content"&gt;
  
      {% unless page.full_url contains '/product/' or page.full_url contains 'blog' %}
      &lt;h1 class="page-title"&gt;{{ page.name | remove: '-footer-' | remove: '-hide-' | remove: '-sidebar-' | remove: '-subnav-' | remove: '-f1-' | remove: '-f2-' | remove: '-f3-' }}&lt;/h1&gt;
      {% endunless %}
              {% if page.category == 'custom' %} 
              {{ page_content | paragraphs }} 
              {% else %} 
              {{ page_content }} 
              {% endif %}
     &lt;/div&gt;
  &lt;/div&gt;
  
  
   &lt;/div&gt;   
  </code></pre>