下拉菜单不起作用

时间：2017-01-10 15:29:26

标签： javascript html css list drop-down-menu

我正在创建一个包含两个项目的菜单＆＃34;什么是新的＆＃34;和＆＃34;类别＆＃34;当用户点击类别时，应该有大量的子类别下降。但是，我无法弄清楚如何让它们下降。有没有人有任何解决方案？这是小提琴 - https://jsfiddle.net/v3ftk7t0/

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

CSS

＆＃13;
＆＃13; 
.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;
}
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

在这里你有办法，我删除了所有我不需要的东西，你将能够再次添加它。只需点击类别即可享受!!! 

.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>

编辑：再次添加css类。

Here完整的小提琴。

答案 1 :(得分：-1)

添加此css：

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

这将执行以下操作：

当您将鼠标悬停在ul.shop-nav li元素上时，您可以将ul嵌套在内部设置为显示。

相关问题
最新问题