Untitled

<div class="navigation-container">

  <ul id="product-navigation" class="navigation">

    <li id="navigation-title" class="root">

      <a href="#"><span>Products For Sale</span></a>

      <ul id="products-categories" class="categories">

        <li><a href="#"><span>Tickets</span></a>

          <ul id="tickets-categories" class="categories">

            <li><a href="#"><span>Music</span></a></li>

            <li><a href="#"><span>Sport</span></a></li>

            <li><a href="#"><span>Culture</span></a></li>

            <li><a href="#"><span>Travel</span></a></li>

            <li><a href="#"><span>Other</span></a></li>

          </ul>

        </li>

        <li><a href="#"><span>Electronics</span></a></li>

        <li><a href="#"><span>Home Appliances</span></a></li>

        <li><a href="#"><span>Other</span></a></li>

      </ul>

    </li>

  </ul>

</div>

// CSSDECK SPECIFIC

body {

  padding: 30px;

}

// CSSDECK SPECIFIC

a {

  color: #fff;

}

$menu-root-background: linear-gradient(top left, #333, #0c0);

.navigation-container {

  background: #444;

  width: 320px;

  position: relative;

  // Main navigation list

  .navigation {

    &, ul {

      list-style: none;

      margin: 0;

      padding: 0;

    }

    // Main navigation element link

    // This is the one which opens the dropdown.

    .root {

      &, a {

        display: block;

        line-height: 38px;

      }

      & > a {

        @include background(linear-gradient(top left, #000, #0f0f0f));

        height: 38px;

        padding: 0 10px;

        text-decoration: none;

        text-transform: uppercase;

        font-size: .9em;

        font-weight: bold;

      }

    }

  }

}

var navigation = $('#product-navigation');