<div class="navigation-container">
<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
// 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 {
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');
var navigation = $('#product-navigation');