EmiliaCeramics Main Navigation

In this example below you will see how to do a EmiliaCeramics Main Navigation with some HTML / CSS and Javascript

WooCommerce store, want to display a lot of selections and make room for images on the left side if that comes up.

Thumbnail
This awesome code was written by SteveClason, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SteveClason ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>EmiliaCeramics Main Navigation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://emiliaceramics.staging.wpengine.com/wp-content/themes/storefront/style.css?ver=2.1.5'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,900&subset=latin%2Clatin-ext'>
<link rel='stylesheet prefetch' href='https://emiliaceramics.staging.wpengine.com/wp-content/themes/emiliaceramics/style.css?ver=4.6.1'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ver=4.2.0'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="emiliaceramics-primary-navigation">
  <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Navigation">
    <button class="menu-toggle" aria-controls="site-navigation" aria-expanded="false"><span>Menu</span></button>
    <div class="primary-navigation">
      <ul id="menu-header-menu" class="menu">
        <li id="menu-item-14537" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-ancestor current-menu-parent menu-item-has-children menu-item-14537"><a href="https://emiliaceramics.staging.wpengine.com/product-category/by-country/">SHOP BY COUNTRY</a>
          <ul class="sub-menu">
            <li id="menu-item-13264" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item menu-item-has-children menu-item-13264"><a href="https://emiliaceramics.staging.wpengine.com/product-category/mexico/">Mexico</a>
              <ul class="sub-menu">
                <li id="menu-item-13268" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13268"><a href="https://emiliaceramics.staging.wpengine.com/product-category/talavera-vazquez/">Talavera Vazquez</a></li>
                <li id="menu-item-13266" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13266"><a href="https://emiliaceramics.staging.wpengine.com/product-category/gorky-gonzalez/">Gorky Gonzalez</a></li>
                <li id="menu-item-13265" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13265"><a href="https://emiliaceramics.staging.wpengine.com/product-category/capelo/">Capelo</a></li>
                <li id="menu-item-14123" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14123"><a href="https://emiliaceramics.staging.wpengine.com/product-category/guajuye-glassware/">Guajuye Glassware</a></li>
              </ul>
            </li>
            <li id="menu-item-13256" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13256"><a href="https://emiliaceramics.staging.wpengine.com/product-category/france/">France</a>
              <ul class="sub-menu">
                <li id="menu-item-13259" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13259"><a href="https://emiliaceramics.staging.wpengine.com/product-category/richard-esteban/">Richard Esteban</a></li>
                <li id="menu-item-13267" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13267"><a href="https://emiliaceramics.staging.wpengine.com/product-category/sylvie-duriez/">Sylvie Duriez</a></li>
                <li id="menu-item-13258" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13258"><a href="https://emiliaceramics.staging.wpengine.com/product-category/poterie-ravel/">Poterie Ravel</a></li>
                <li id="menu-item-13257" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13257"><a href="https://emiliaceramics.staging.wpengine.com/product-category/patrice-voelkel/">Patrice Voelkel</a></li>
              </ul>
            </li>
            <li id="menu-item-13260" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13260"><a href="https://emiliaceramics.staging.wpengine.com/product-category/italy/">Italy</a>
              <ul class="sub-menu">
                <li id="menu-item-13262" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13262"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ceramiche-darte-tuscia/">Ceramiche D&#8217;Arte Tuscia</a></li>
                <li id="menu-item-13261" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13261"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ceramiche-bartoloni/">Ceramiche Bartoloni</a></li>
                <li id="menu-item-14124" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14124"><a href="https://emiliaceramics.staging.wpengine.com/product-category/gialletti-giulio/">Gialletti Giulio</a></li>
              </ul>
            </li>
            <li id="menu-item-13271" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13271"><a href="https://emiliaceramics.staging.wpengine.com/product-category/spain/">Spain</a>
              <ul class="sub-menu">
                <li id="menu-item-14125" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14125"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ceramica-valenciana/">Ceramica Valenciana</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="menu-item-14538" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-14538"><a href="https://emiliaceramics.staging.wpengine.com/product-category/home-d_cor/">HOME DÉCOR</a>
          <ul class="sub-menu">
            <li id="menu-item-13273" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13273"><a href="https://emiliaceramics.staging.wpengine.com/product-category/living-dining-room/">Living &#038; Dining Room</a>
              <ul class="sub-menu">
                <li id="menu-item-13274" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13274"><a href="https://emiliaceramics.staging.wpengine.com/product-category/table-lamps/">Table Lamps</a></li>
                <li id="menu-item-13275" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13275"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ginger-jars-urns/">Ginger Jars / Urns</a></li>
                <li id="menu-item-13276" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13276"><a href="https://emiliaceramics.staging.wpengine.com/product-category/vases/">Vases</a></li>
                <li id="menu-item-14126" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14126"><a href="https://emiliaceramics.staging.wpengine.com/product-category/centerpieces/">Centerpieces</a></li>
                <li id="menu-item-14541" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14541"><a href="https://emiliaceramics.staging.wpengine.com/product-category/wall-d_cor/">Wall Décor</a></li>
              </ul>
            </li>
            <li id="menu-item-13279" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13279"><a href="https://emiliaceramics.staging.wpengine.com/product-category/kitchen/">Kitchen</a>
              <ul class="sub-menu">
                <li id="menu-item-13280" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13280"><a href="https://emiliaceramics.staging.wpengine.com/product-category/canisters/">Canisters</a></li>
                <li id="menu-item-13281" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13281"><a href="https://emiliaceramics.staging.wpengine.com/product-category/utensil-holders/">Utensil Holders</a></li>
                <li id="menu-item-13282" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13282"><a href="https://emiliaceramics.staging.wpengine.com/product-category/pitchers/">Pitchers</a></li>
                <li id="menu-item-13283" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13283"><a href="https://emiliaceramics.staging.wpengine.com/product-category/butter-dishes/">Butter Dishes</a></li>
                <li id="menu-item-13284" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13284"><a href="https://emiliaceramics.staging.wpengine.com/product-category/spoon-rests/">Spoon Rests</a></li>
                <li id="menu-item-14130" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14130"><a href="https://emiliaceramics.staging.wpengine.com/product-category/oil-vinegar-dispensers/">Oil / Vinegar Dispensers</a></li>
              </ul>
            </li>
            <li id="menu-item-13286" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13286"><a href="https://emiliaceramics.staging.wpengine.com/product-category/bath-bedroom/">Bath &#038; Bedroom</a>
              <ul class="sub-menu">
                <li id="menu-item-13287" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13287"><a href="https://emiliaceramics.staging.wpengine.com/product-category/soap-dishes/">Soap Dishes</a></li>
                <li id="menu-item-13288" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13288"><a href="https://emiliaceramics.staging.wpengine.com/product-category/tissue-boxes/">Tissue Boxes</a></li>
                <li id="menu-item-13289" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13289"><a href="https://emiliaceramics.staging.wpengine.com/product-category/candleholders/">Candleholders</a></li>
                <li id="menu-item-14131" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14131"><a href="https://emiliaceramics.staging.wpengine.com/product-category/jewelry-boxes-trays/">Jewelry Boxes &#038; Trays</a></li>
                <li id="menu-item-13291" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13291"><a href="https://emiliaceramics.staging.wpengine.com/product-category/table-lamps/">Table Lamps</a></li>
              </ul>
            </li>
            <li id="menu-item-13292" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13292"><a href="https://emiliaceramics.staging.wpengine.com/product-category/garden-patio/">Garden &#038; Patio</a>
              <ul class="sub-menu">
                <li id="menu-item-13293" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13293"><a href="https://emiliaceramics.staging.wpengine.com/product-category/planters/">Planters</a></li>
                <li id="menu-item-13294" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13294"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ginger-jars-urns/">Ginger Jars / Urns</a></li>
                <li id="menu-item-14132" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14132"><a href="https://emiliaceramics.staging.wpengine.com/product-category/outdoor-entertaining/">Outdoor Entertaining</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="menu-item-13270" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13270"><a href="https://emiliaceramics.staging.wpengine.com/product-category/dining-entertaining/">DINING &#038; ENTERTAINING</a>
          <ul class="sub-menu">
            <li id="menu-item-13296" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13296"><a href="https://emiliaceramics.staging.wpengine.com/product-category/plates/">Plates</a>
              <ul class="sub-menu">
                <li id="menu-item-13297" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13297"><a href="https://emiliaceramics.staging.wpengine.com/product-category/dinner-plates/">Dinner Plates</a></li>
                <li id="menu-item-13298" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13298"><a href="https://emiliaceramics.staging.wpengine.com/product-category/salad-dessert-plates/">Salad &#038; Dessert Plates</a></li>
                <li id="menu-item-13300" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13300"><a href="https://emiliaceramics.staging.wpengine.com/product-category/chargers/">Chargers</a></li>
                <li id="menu-item-14445" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14445"><a href="https://emiliaceramics.staging.wpengine.com/product-category/appetizer-mini-plates/">Appetizer / Mini Plates</a></li>
              </ul>
            </li>
            <li id="menu-item-13301" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13301"><a href="https://emiliaceramics.staging.wpengine.com/product-category/bowls/">Bowls</a>
              <ul class="sub-menu">
                <li id="menu-item-13303" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13303"><a href="https://emiliaceramics.staging.wpengine.com/product-category/soup-cereal-bowls/">Soup &#038; Cereal Bowls</a></li>
                <li id="menu-item-13304" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13304"><a href="https://emiliaceramics.staging.wpengine.com/product-category/pasta-bowls/">Pasta Bowls</a></li>
                <li id="menu-item-14446" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14446"><a href="https://emiliaceramics.staging.wpengine.com/product-category/mixing-bowls/">Mixing Bowls</a></li>
                <li id="menu-item-13305" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13305"><a href="https://emiliaceramics.staging.wpengine.com/product-category/dip-bowls/">Dip Bowls</a></li>
              </ul>
            </li>
            <li id="menu-item-13306" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13306"><a href="https://emiliaceramics.staging.wpengine.com/product-category/serving-dishes/">Serving Dishes</a>
              <ul class="sub-menu">
                <li id="menu-item-13307" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13307"><a href="https://emiliaceramics.staging.wpengine.com/product-category/plates-platters/">Plates &#038; Platters</a></li>
                <li id="menu-item-13309" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13309"><a href="https://emiliaceramics.staging.wpengine.com/product-category/oval-dishes/">Oval Dishes</a></li>
                <li id="menu-item-13310" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13310"><a href="https://emiliaceramics.staging.wpengine.com/product-category/serving-bowls/">Serving Bowls</a></li>
                <li id="menu-item-13308" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13308"><a href="https://emiliaceramics.staging.wpengine.com/product-category/footed-platters-bowls/">Footed Platters &#038; Bowls</a></li>
              </ul>
            </li>
            <li id="menu-item-13311" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13311"><a href="https://emiliaceramics.staging.wpengine.com/product-category/drinkware/">Drinkware</a>
              <ul class="sub-menu">
                <li id="menu-item-13312" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13312"><a href="https://emiliaceramics.staging.wpengine.com/product-category/mugs-tea-cups/">Mugs &#038; Tea Cups</a></li>
                <li id="menu-item-13314" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13314"><a href="https://emiliaceramics.staging.wpengine.com/product-category/glassware/">Glassware</a></li>
                <li id="menu-item-13315" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13315"><a href="https://emiliaceramics.staging.wpengine.com/product-category/pitchers/">Pitchers</a></li>
                <li id="menu-item-13313" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13313"><a href="https://emiliaceramics.staging.wpengine.com/product-category/creamers-sugar-bowls/">Creamers &#038; Sugar Bowls</a></li>
                <li id="menu-item-14217" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14217"><a href="https://emiliaceramics.staging.wpengine.com/product-category/wine-bottle-holders/">Wine Accessories</a></li>
              </ul>
            </li>
            <li id="menu-item-13316" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13316"><a href="https://emiliaceramics.staging.wpengine.com/product-category/table-accessories/">Table Accessories</a>
              <ul class="sub-menu">
                <li id="menu-item-14215" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14215"><a href="https://emiliaceramics.staging.wpengine.com/product-category/hot-plates-trivets/">Hot Plates / Trivets</a></li>
                <li id="menu-item-13319" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13319"><a href="https://emiliaceramics.staging.wpengine.com/product-category/salt-pepper-shakers/">Salt &#038; Pepper Shakers</a></li>
                <li id="menu-item-13320" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13320"><a href="https://emiliaceramics.staging.wpengine.com/product-category/candleholders/">Candleholders</a></li>
                <li id="menu-item-13321" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13321"><a href="https://emiliaceramics.staging.wpengine.com/product-category/table-linens/">Table Linens</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="menu-item-13295" class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-has-children menu-item-13295"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/gift/">GIFTS &#038; SEASONAL</a>
          <ul class="sub-menu">
            <li id="menu-item-13323" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-13323"><a href="#">Seasonal Décor</a>
              <ul class="sub-menu">
                <li id="menu-item-13322" class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-13322"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/day-of-the-dead/">Day of the Dead</a></li>
                <li id="menu-item-14264" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14264"><a href="https://emiliaceramics.staging.wpengine.com/product-category/holiday-serving-dishes/">Holiday Serving Dishes</a></li>
                <li id="menu-item-14258" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14258"><a href="https://emiliaceramics.staging.wpengine.com/product-category/christmas-ornaments/">Christmas Ornaments</a></li>
              </ul>
            </li>
            <li id="menu-item-13326" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-13326"><a href="#">Special Occasion Gifts</a>
              <ul class="sub-menu">
                <li id="menu-item-13327" class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-13327"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/hostess/">Host / Hostess</a></li>
                <li id="menu-item-13328" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13328"><a href="/product-tag/shower/">Bridal Shower</a></li>
                <li id="menu-item-13329" class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-13329"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/wedding/">Wedding</a></li>
                <li id="menu-item-13330" class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-13330"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/anniversary/">Anniversary</a></li>
              </ul>
            </li>
            <li id="menu-item-13331" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-13331"><a href="#">Gift Ideas For &#8230;</a>
              <ul class="sub-menu">
                <li id="menu-item-14455" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14455"><a href="https://emiliaceramics.staging.wpengine.com/product-category/rooster-collectors/">Rooster Collectors</a></li>
                <li id="menu-item-14454" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14454"><a href="https://emiliaceramics.staging.wpengine.com/product-category/lemon-lovers/">Lemon Lovers</a></li>
                <li id="menu-item-14456" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14456"><a href="https://emiliaceramics.staging.wpengine.com/product-category/wine-enthusiasts/">Wine Enthusiasts</a></li>
                <li id="menu-item-14457" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14457"><a href="https://emiliaceramics.staging.wpengine.com/product-category/coffee-coinosseurs/">Coffee Coinosseurs</a></li>
              </ul>
            </li>
            <li id="menu-item-14464" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14464"><a href="https://emiliaceramics.staging.wpengine.com/gift-cards/">Gift Cards</a></li>
          </ul>
        </li>
        <li id="menu-item-14547" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-14547"><a href="https://emiliaceramics.staging.wpengine.com/about/">ABOUT US</a>
          <ul class="sub-menu">
            <li id="menu-item-13174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13174"><a href="https://emiliaceramics.staging.wpengine.com/meet-the-artists/">Meet The Artists</a></li>
            <li id="menu-item-13121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13121"><a href="https://emiliaceramics.staging.wpengine.com/press/">Emilia Ceramics in the Press</a></li>
            <li id="menu-item-13120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13120"><a href="https://emiliaceramics.staging.wpengine.com/blog/">Read Our Blog</a></li>
            <li id="menu-item-13255" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13255"><a href="https://emiliaceramics.staging.wpengine.com/contact-us/">Contact Us</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="handheld-navigation">
      <ul id="menu-header-menu-1" class="menu">
        <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-ancestor current-menu-parent menu-item-has-children menu-item-14537"><a href="https://emiliaceramics.staging.wpengine.com/product-category/by-country/">SHOP BY COUNTRY</a>
          <ul class="sub-menu">
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item menu-item-has-children menu-item-13264"><a href="https://emiliaceramics.staging.wpengine.com/product-category/mexico/">Mexico</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13268"><a href="https://emiliaceramics.staging.wpengine.com/product-category/talavera-vazquez/">Talavera Vazquez</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13266"><a href="https://emiliaceramics.staging.wpengine.com/product-category/gorky-gonzalez/">Gorky Gonzalez</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13265"><a href="https://emiliaceramics.staging.wpengine.com/product-category/capelo/">Capelo</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14123"><a href="https://emiliaceramics.staging.wpengine.com/product-category/guajuye-glassware/">Guajuye Glassware</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13256"><a href="https://emiliaceramics.staging.wpengine.com/product-category/france/">France</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13259"><a href="https://emiliaceramics.staging.wpengine.com/product-category/richard-esteban/">Richard Esteban</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13267"><a href="https://emiliaceramics.staging.wpengine.com/product-category/sylvie-duriez/">Sylvie Duriez</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13258"><a href="https://emiliaceramics.staging.wpengine.com/product-category/poterie-ravel/">Poterie Ravel</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13257"><a href="https://emiliaceramics.staging.wpengine.com/product-category/patrice-voelkel/">Patrice Voelkel</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13260"><a href="https://emiliaceramics.staging.wpengine.com/product-category/italy/">Italy</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13262"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ceramiche-darte-tuscia/">Ceramiche D&#8217;Arte Tuscia</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13261"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ceramiche-bartoloni/">Ceramiche Bartoloni</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14124"><a href="https://emiliaceramics.staging.wpengine.com/product-category/gialletti-giulio/">Gialletti Giulio</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13271"><a href="https://emiliaceramics.staging.wpengine.com/product-category/spain/">Spain</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14125"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ceramica-valenciana/">Ceramica Valenciana</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-14538"><a href="https://emiliaceramics.staging.wpengine.com/product-category/home-d_cor/">HOME DÉCOR</a>
          <ul class="sub-menu">
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13273"><a href="https://emiliaceramics.staging.wpengine.com/product-category/living-dining-room/">Living &#038; Dining Room</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13274"><a href="https://emiliaceramics.staging.wpengine.com/product-category/table-lamps/">Table Lamps</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13275"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ginger-jars-urns/">Ginger Jars / Urns</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13276"><a href="https://emiliaceramics.staging.wpengine.com/product-category/vases/">Vases</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14126"><a href="https://emiliaceramics.staging.wpengine.com/product-category/centerpieces/">Centerpieces</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14541"><a href="https://emiliaceramics.staging.wpengine.com/product-category/wall-d_cor/">Wall Décor</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13279"><a href="https://emiliaceramics.staging.wpengine.com/product-category/kitchen/">Kitchen</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13280"><a href="https://emiliaceramics.staging.wpengine.com/product-category/canisters/">Canisters</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13281"><a href="https://emiliaceramics.staging.wpengine.com/product-category/utensil-holders/">Utensil Holders</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13282"><a href="https://emiliaceramics.staging.wpengine.com/product-category/pitchers/">Pitchers</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13283"><a href="https://emiliaceramics.staging.wpengine.com/product-category/butter-dishes/">Butter Dishes</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13284"><a href="https://emiliaceramics.staging.wpengine.com/product-category/spoon-rests/">Spoon Rests</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14130"><a href="https://emiliaceramics.staging.wpengine.com/product-category/oil-vinegar-dispensers/">Oil / Vinegar Dispensers</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13286"><a href="https://emiliaceramics.staging.wpengine.com/product-category/bath-bedroom/">Bath &#038; Bedroom</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13287"><a href="https://emiliaceramics.staging.wpengine.com/product-category/soap-dishes/">Soap Dishes</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13288"><a href="https://emiliaceramics.staging.wpengine.com/product-category/tissue-boxes/">Tissue Boxes</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13289"><a href="https://emiliaceramics.staging.wpengine.com/product-category/candleholders/">Candleholders</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14131"><a href="https://emiliaceramics.staging.wpengine.com/product-category/jewelry-boxes-trays/">Jewelry Boxes &#038; Trays</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13291"><a href="https://emiliaceramics.staging.wpengine.com/product-category/table-lamps/">Table Lamps</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13292"><a href="https://emiliaceramics.staging.wpengine.com/product-category/garden-patio/">Garden &#038; Patio</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13293"><a href="https://emiliaceramics.staging.wpengine.com/product-category/planters/">Planters</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13294"><a href="https://emiliaceramics.staging.wpengine.com/product-category/ginger-jars-urns/">Ginger Jars / Urns</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14132"><a href="https://emiliaceramics.staging.wpengine.com/product-category/outdoor-entertaining/">Outdoor Entertaining</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13270"><a href="https://emiliaceramics.staging.wpengine.com/product-category/dining-entertaining/">DINING &#038; ENTERTAINING</a>
          <ul class="sub-menu">
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13296"><a href="https://emiliaceramics.staging.wpengine.com/product-category/plates/">Plates</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13297"><a href="https://emiliaceramics.staging.wpengine.com/product-category/dinner-plates/">Dinner Plates</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13298"><a href="https://emiliaceramics.staging.wpengine.com/product-category/salad-dessert-plates/">Salad &#038; Dessert Plates</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13300"><a href="https://emiliaceramics.staging.wpengine.com/product-category/chargers/">Chargers</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14445"><a href="https://emiliaceramics.staging.wpengine.com/product-category/appetizer-mini-plates/">Appetizer / Mini Plates</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13301"><a href="https://emiliaceramics.staging.wpengine.com/product-category/bowls/">Bowls</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13303"><a href="https://emiliaceramics.staging.wpengine.com/product-category/soup-cereal-bowls/">Soup &#038; Cereal Bowls</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13304"><a href="https://emiliaceramics.staging.wpengine.com/product-category/pasta-bowls/">Pasta Bowls</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14446"><a href="https://emiliaceramics.staging.wpengine.com/product-category/mixing-bowls/">Mixing Bowls</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13305"><a href="https://emiliaceramics.staging.wpengine.com/product-category/dip-bowls/">Dip Bowls</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13306"><a href="https://emiliaceramics.staging.wpengine.com/product-category/serving-dishes/">Serving Dishes</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13307"><a href="https://emiliaceramics.staging.wpengine.com/product-category/plates-platters/">Plates &#038; Platters</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13309"><a href="https://emiliaceramics.staging.wpengine.com/product-category/oval-dishes/">Oval Dishes</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13310"><a href="https://emiliaceramics.staging.wpengine.com/product-category/serving-bowls/">Serving Bowls</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13308"><a href="https://emiliaceramics.staging.wpengine.com/product-category/footed-platters-bowls/">Footed Platters &#038; Bowls</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13311"><a href="https://emiliaceramics.staging.wpengine.com/product-category/drinkware/">Drinkware</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13312"><a href="https://emiliaceramics.staging.wpengine.com/product-category/mugs-tea-cups/">Mugs &#038; Tea Cups</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13314"><a href="https://emiliaceramics.staging.wpengine.com/product-category/glassware/">Glassware</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13315"><a href="https://emiliaceramics.staging.wpengine.com/product-category/pitchers/">Pitchers</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13313"><a href="https://emiliaceramics.staging.wpengine.com/product-category/creamers-sugar-bowls/">Creamers &#038; Sugar Bowls</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14217"><a href="https://emiliaceramics.staging.wpengine.com/product-category/wine-bottle-holders/">Wine Accessories</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-13316"><a href="https://emiliaceramics.staging.wpengine.com/product-category/table-accessories/">Table Accessories</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14215"><a href="https://emiliaceramics.staging.wpengine.com/product-category/hot-plates-trivets/">Hot Plates / Trivets</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13319"><a href="https://emiliaceramics.staging.wpengine.com/product-category/salt-pepper-shakers/">Salt &#038; Pepper Shakers</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13320"><a href="https://emiliaceramics.staging.wpengine.com/product-category/candleholders/">Candleholders</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-13321"><a href="https://emiliaceramics.staging.wpengine.com/product-category/table-linens/">Table Linens</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-has-children menu-item-13295"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/gift/">GIFTS &#038; SEASONAL</a>
          <ul class="sub-menu">
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-13323"><a href="#">Seasonal Décor</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-13322"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/day-of-the-dead/">Day of the Dead</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14264"><a href="https://emiliaceramics.staging.wpengine.com/product-category/holiday-serving-dishes/">Holiday Serving Dishes</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14258"><a href="https://emiliaceramics.staging.wpengine.com/product-category/christmas-ornaments/">Christmas Ornaments</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-13326"><a href="#">Special Occasion Gifts</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-13327"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/hostess/">Host / Hostess</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13328"><a href="/product-tag/shower/">Bridal Shower</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-13329"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/wedding/">Wedding</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_tag menu-item-13330"><a href="https://emiliaceramics.staging.wpengine.com/product-tag/anniversary/">Anniversary</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-13331"><a href="#">Gift Ideas For &#8230;</a>
              <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14455"><a href="https://emiliaceramics.staging.wpengine.com/product-category/rooster-collectors/">Rooster Collectors</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14454"><a href="https://emiliaceramics.staging.wpengine.com/product-category/lemon-lovers/">Lemon Lovers</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14456"><a href="https://emiliaceramics.staging.wpengine.com/product-category/wine-enthusiasts/">Wine Enthusiasts</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-14457"><a href="https://emiliaceramics.staging.wpengine.com/product-category/coffee-coinosseurs/">Coffee Coinosseurs</a></li>
              </ul>
            </li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14464"><a href="https://emiliaceramics.staging.wpengine.com/gift-cards/">Gift Cards</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-14547"><a href="https://emiliaceramics.staging.wpengine.com/about/">ABOUT US</a>
          <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13174"><a href="https://emiliaceramics.staging.wpengine.com/meet-the-artists/">Meet The Artists</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13121"><a href="https://emiliaceramics.staging.wpengine.com/press/">Emilia Ceramics in the Press</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13120"><a href="https://emiliaceramics.staging.wpengine.com/blog/">Read Our Blog</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13255"><a href="https://emiliaceramics.staging.wpengine.com/contact-us/">Contact Us</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <!-- #site-navigation -->
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/SteveClason/emiliaceramics-main-navigation-aBbZWM */
.emiliaceramics-primary-navigation .main-navigation *{
    position:relative;
    margin:0;
    padding:0;
  }
  .emiliaceramics-primary-navigation .main-navigation ul,
  .emiliaceramics-primary-navigation .main-navigation ul li,
  .emiliaceramics-primary-navigation .main-navigation ul li a,
  .emiliaceramics-primary-navigation .main-navigation ul li a:hover,
  .emiliaceramics-primary-navigation .main-navigation ul ul,
  .emiliaceramics-primary-navigation .main-navigation ul ul li,
  .emiliaceramics-primary-navigation .main-navigation ul ul li a,
  .emiliaceramics-primary-navigation .main-navigation ul ul li a:hover,
  .emiliaceramics-primary-navigation .main-navigation ul ul ul,
  .emiliaceramics-primary-navigation .main-navigation ul ul ul li,
  .emiliaceramics-primary-navigation .main-navigation ul ul ul li a,
  .emiliaceramics-primary-navigation .main-navigation ul ul ul li a:hover,
  .emiliaceramics-primary-navigation .main-navigation ul > li:hover > ul > li:hover > ul{
    margin:0;
    padding:0;
    position:relative;
    top:0;
    left:0;
  }
.emiliaceramics-primary-navigation .main-navigation{
  text-align:center;
  position:relative;
  width:70em;
  border:1px solid black;
  border-bottom:none;
  margin:1em auto;
  padding:1em; 
}
.emiliaceramics-primary-navigation .main-navigation ul{
    float:none;
    display:flex;
    justify-content:center;
    position:relative;
  }
.emiliaceramics-primary-navigation .main-navigation ul li{
      margin:0 .8em
    }
.emiliaceramics-primary-navigation .main-navigation ul li.menu-item-has-children a::after{
      margin-left:0.4em;
    }
.emiliaceramics-primary-navigation .main-navigation ul a{
      padding:0;
    }
.emiliaceramics-primary-navigation .main-navigation ul ul{
      width:100%;
      position:absolute;
      left:0;
      top:1em;
      display:none;
      margin:0;
      padding:1em 0 0 0;
    }
.emiliaceramics-primary-navigation .main-navigation ul ul li{
        width:auto;
      }
.emiliaceramics-primary-navigation .main-navigation ul ul li a{
          padding:0;
          margin:0;
          font-weight:700;
        }
.emiliaceramics-primary-navigation .main-navigation ul ul li.menu-item-has-children a::after{
        content:'';
      }
.emiliaceramics-primary-navigation .main-navigation ul ul ul{
        position:absolute;
        left:0;
        padding:0;
        margin:0;
      }
.emiliaceramics-primary-navigation .main-navigation ul ul ul a{
          padding:0;
          margin:0;
          font-weight:400;
        }
.emiliaceramics-primary-navigation .main-navigation ul > li:hover{
    position:unset;
  }
.emiliaceramics-primary-navigation .main-navigation ul > li:hover a:hover{
      color:black;
      background:none;
    }
.emiliaceramics-primary-navigation .main-navigation ul > li:hover > ul{
    display:flex;
    justify-content:center;
  }
.emiliaceramics-primary-navigation .main-navigation ul > li:hover > ul li{
      position:relative;
    }
.emiliaceramics-primary-navigation .main-navigation ul > li:hover > ul ul{
      display:block;
      left:1em;
      top:0;
      position:relative;
    }
.emiliaceramics-primary-navigation .main-navigation ul > li:hover > ul > li:hover{
    position:relative;
    background:none;
    padding:0;
    margin:0;
  }
.emiliaceramics-primary-navigation .main-navigation ul > li:hover > ul > li:hover a{
      background:none;
      padding:0;
    }
.emiliaceramics-primary-navigation .main-navigation ul > li:hover > ul > li:hover ul{
      position:relative;
      left:1em;
      display:block;
    }

Comments