"subcategoryyy"
Bootstrap 4.1.1 Snippet by ravic9089

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css" rel="stylesheet"><nav class="navigation">
<ul class="mainmenu">
<li><a href="https://grobuys.com/home/allproductsbycategory?str=grocery-staples"> Grocery & Staples <i class="mdi mdi-chevron-right float-right"></i></a>
<ul class="submenu">
<li><a href="https://grobuys.com/home/category?str=attawheat-flour"><i class="mdi mdi-chevron-down float-left"></i>···Atta/Wheat Flour</a></li>
<li><a href="https://grobuys.com/home/category?str=besan-sooji-maida"><i class="mdi mdi-chevron-down float-left"></i>···Besan, Sooji & Maida</a></li>
<li><a href="https://grobuys.com/home/category?str=other-flours"><i class="mdi mdi-chevron-down float-left"></i>···Other Flours</a></li>
<li><a href="https://grobuys.com/home/category?str=rice"><i class="mdi mdi-chevron-down float-left"></i>···Rice</a></li>
<li><a href="https://grobuys.com/home/category?str=grains"><i class="mdi mdi-chevron-down float-left"></i>···Grains</a></li>
<li><a href="https://grobuys.com/home/category?str=poha-daliya-soya-products"><i class="mdi mdi-chevron-down float-left"></i>···Poha, Daliya & Soya Products</a></li>
<li><a href="https://grobuys.com/home/category?str=edible-oils"><i class="mdi mdi-chevron-down float-left"></i>···Edible Oils</a></li>
<li><a href="https://grobuys.com/home/category?str=ghee-vanaspati"><i class="mdi mdi-chevron-down float-left"></i>···Ghee & Vanaspati</a></li>
<li><a href="https://grobuys.com/home/category?str=salt"><i class="mdi mdi-chevron-down float-left"></i>···Salt</a></li>
<li><a href="https://grobuys.com/home/category?str=sugar-jaggery"><i class="mdi mdi-chevron-down float-left"></i>···Sugar & Jaggery</a></li>
<li><a href="https://grobuys.com/home/category?str=dry-fruits-nuts-seeds"><i class="mdi mdi-chevron-down float-left"></i>···Dry Fruits, Nuts & Seeds</a></li>
<li><a href="https://grobuys.com/home/category?str=organic-flours"><i class="mdi mdi-chevron-down float-left"></i>···ORGANIC FLOURS</a></li>
</ul>
</li>
<li><a href="https://grobuys.com/home/allproductsbycategory?str=organic-staples"> Organic Staples <i class="mdi mdi-chevron-right float-right"></i></a>
<ul class="submenu">
<li><a href="https://grobuys.com/home/category?str=organic-flours"><i class="mdi mdi-chevron-down float-left"></i>···Organic Flours</a></li>
<li><a href="https://grobuys.com/home/category?str=organic-rice-grains"><i class="mdi mdi-chevron-down float-left"></i>···Organic Rice & Grains</a></li>
<li><a href="https://grobuys.com/home/category?str=organic-pulses"><i class="mdi mdi-chevron-down float-left"></i>···Organic Pulses</a></li>
<li><a href="https://grobuys.com/home/category?str=organic-spices"><i class="mdi mdi-chevron-down float-left"></i>···Organic Spices</a></li>
</ul>
</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* define a fixed width for the entire menu */
.navigation {
width: 300px;
height:550px;
overflow-y:scroll;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #fff;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
/*.mainmenu a:hover {
background-color: var(--main-sec-color)!important;
}
*/
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro React

Questions / Comments: