下拉菜单不起作用

Question

I'm creating a menu that has two items "what's new" and "categories" when a user clicks categories there are supposed to be a ton of sub categories that drop down. However I can't figure out how to get them to drop down. Does anyone have any solutions? Here is the fiddle - https://jsfiddle.net/v3ftk7t0/

 <div class='shop-sidebar'> <ul class='shop-nav'> <li class="active"><a href="#">What's New</a></li> <li class='w-sub' data-id='shop-categories'> <svg class='s_arrow_down'><use xlink:href="#s_arrow_down"></use></svg> Categories <ul> <li> <a href="#">All</a> </li> <li> <a href="#" class="active">Category 1</a> <ul> <li> <a href="#">All</a> </li> <li> <a href="#">Sub Category 1</a> </li> <li> <a href="#">Sub Category 2</a> </li> <li> <a href="#">Sub Category 3</a> </li> <li> <a href="#">Sub Category 4</a> </li> <li> <a href="#">Sub Category 5</a> </li> <li> <a href="#">Sub Category 6</a> </li> <li> <a href="#">Sub Category 7</a> </li> <li> <a href="#">Sub Category 8</a> </li> <li> <a href="#">Sub Category 9</a> </li> </ul> </li> <li> <a href="#" class="active">Category 2</a> <ul> <li> <a href="#">All</a> </li> <li> <a href="#">Sub Category 1</a> </li> <li> <a href="#">Sub Category 2</a> </li> </ul> </li> <li> <a href="#" class="active">Category 3</a> <ul> <li> <a href="#">All</a> </li> <li> <a href="#">Sub Category 1</a> </li> </ul> </li> </ul> </li> </ul> </div>

css

 .shop-sidebar { width: 30%; width: calc(295px); display: inline-block; padding-right: 65px; vertical-align: top; font-family: 'maison',sans-serif; font-weight: 600; font-size: 11px; color: #000; letter-spacing: 1.5px; line-height: 18px; text-transform: uppercase; } ul.shop-nav { list-style: none; padding: 0; margin: 0; } ul.shop-nav li.active, ul.shop-nav li:hover { color: #000; opacity: 1; font-weight: bold; } ul.shop-nav li { transition: all 0.3s; cursor: pointer; padding: 18px 20px; background-color: #f8f8f8; margin-bottom: 2px; } ul.shop-nav li.active a { color: #000; } ul.shop-nav a { color: #000; } ul.shop-nav li.active, ul.shop-nav li:hover { color: #000; opacity: 1; font-weight: bold; } ul.shop-nav li svg { width: 10px; height: 10px; vertical-align: text-bottom; fill: #000; transition: all 0.3s; float: right; } ul.shop-nav li ul { display: none; list-style: none; padding-left: 0; margin: 12px 0 0; } ul.shop-nav li ul li { color: #000; border: 0 !important; font-family: 'maison',sans-serif; font-size: 12px; letter-spacing: 0; padding: 0; font-weight: normal; text-transform: none; margin-bottom: 12px; } ul.shop-nav li ul ul { margin-left: 16px; }

Answer 1

Here you have the way, I've removed all what i didnt need, you will be able to add it again. Just click on Categories and enjoy!!!

 .shop-sidebar { width: 30%; width: calc(295px); display: inline-block; padding-right: 65px; vertical-align: top; font-family: 'maison',sans-serif; font-weight: 600; font-size: 11px; color: #000; letter-spacing: 1.5px; line-height: 18px; text-transform: uppercase; } ul.shop-nav { list-style: none; padding: 0; margin: 0; } ul.shop-nav li.active, ul.shop-nav li:hover { color: #000; opacity: 1; font-weight: bold; } ul.shop-nav li { transition: all 0.3s; cursor: pointer; padding: 18px 20px; background-color: #f8f8f8; margin-bottom: 2px; } ul.shop-nav li.active a { color: #000; } ul.shop-nav a { color: #000; } ul.shop-nav li.active, ul.shop-nav li:hover { color: #000; opacity: 1; font-weight: bold; } ul.shop-nav li svg { width: 10px; height: 10px; vertical-align: text-bottom; fill: #000; transition: all 0.3s; float: right; } ul.shop-nav li ul { display: none; list-style: none; padding-left: 0; margin: 12px 0 0; } ul.shop-nav li ul li { color: #000; border: 0 !important; font-family: 'maison',sans-serif; font-size: 12px; letter-spacing: 0; padding: 0; font-weight: normal; text-transform: none; margin-bottom: 12px; } ul.shop-nav li ul ul { margin-left: 16px; } input[type='checkbox'] { display: none; } #subList, #subListCategory1 { display: none; } #categories:checked ~ #subList { display: block; } #category1:checked ~ #subListCategory1 { display: block; }

 <div class='shop-sidebar'> <ul class='shop-nav'> <li class="active"><a href="#">What's New</a></li> <li class='w-sub' data-id='shop-categories'> <svg class='s_arrow_down'><use xlink:href="#s_arrow_down"></use></svg> <input type="checkbox" id="categories" /> <label id="label" for="categories">Categories</label> <ul id="subList"> <li> <input type="checkbox" id="all" /> <label id="allLabel" for="all">All</label> </li> <input type="checkbox" id="category1" /> <label id="category1Label" for="category1">Category 1</label> <ul id="subListCategory1"> <li> <a href="#">All</a> </li> <li> <a href="#"> Sub Category 1 </a> </li> <li> <a href="#"> Sub Category 2 </a> </li> <li> <a href="#"> Sub Category 3 </a> </li> <li> <a href="#"> Sub Category 4 </a> </li> <li> <a href="#"> Sub Category 5 </a> </li> <li> <a href="#"> Sub Category 6 </a> </li> <li> <a href="#"> Sub Category 7 </a> </li> <li> <a href="#"> Sub Category 8 </a> </li> <li> <a href="#"> Sub Category 9 </a> </li> </ul> <li> <a href="#" class="active"> Category 1 </a> </li> <li> <a href="#" class="active"> Category 2 </a> <ul> <li> <a href="#"> All </a> </li> <li> <a href="#"> Sub Category 1 </a> </li> <li> <a href="#"> Sub Category 2 </a> </li> </ul> </li> <li> <a href="#" class="active"> Category 3 </a> <ul> <li> <a href="#"> All </a> </li> <li> <a href="#"> Sub Category 1 </a> </li> </ul> </li> </ul> </li> </ul> </div>

Edit: css classes added again.

Here the complete fiddle.

Answer 2

Add this css:

ul.shop-nav li:hover ul {
    display: block;
}

This will do the following:

When you hover over the ul.shop-nav li element you set the ul nested inside to display.