如何实现二级菜单的隐藏和显示？

Question

//一级菜单
<div class="shopClass1_item">
				<dl class="shopClass_item1 shopClass_active">
					<dt><a href="#">大家电</a></dt>
						<dd><a href="#">平板电视</a> <a href="#">空调</a> <a href="#">冰箱</a> <a href="#">洗衣机</a> <a href="#">热水器</a> <a href="#">消毒柜</a> <a href="#">冷柜</a> <a href="#">家庭影院</a></dd>
				</dl>
				
				
//二级菜单
<div class="shopClass2_list">
				<dl class="shopClass_list1">
					<dt>电视影音</dt>
					<dd> <a href="#">平板电视</a> <a href="#">空调</a> <a href="#">冰箱</a> <a href="#">洗衣机</a> <a href="#">热水器</a> <a href="#">消毒柜</a> <a href="#">冷柜</a> <a href="#">家庭影院</a><a href="#">平板电视</a> <a href="#">空调</a> <a href="#">冰箱</a> <a href="#">洗衣机</a> <a href="#">热水器</a> <a href="#">消毒柜</a> <a href="#">冷柜</a> <a href="#">家庭影院</a><a href="#">空调</a> <a href="#">冰箱</a> <a href="#">洗衣机</a> <a href="#">热水器</a> <a href="#">消毒柜</a> <a href="#">冷柜</a> <a href="#">家庭影院</a></dd>
				</dl>
				
				
.shopClass2_list{display:none;}这个是二级菜单。
.shopClass1_item dl:hover .shopClass2_list{display:block;}
我这样写实现不了，display:block;不能显示。该怎么办

想要的效果是：鼠标移到一级菜单，就显示二级菜单。

Answer 1

平级的你用css肯定不行，你要hover实现的话就把shopClass2_list的div放到dl下面

Answer 2

使用js去实现。鼠标移入和移出事件。

Answer 3

使用JQery更改你的HTML样式，

Answer 4

js控制~~

Answer 5

两个方案： 1 改造页面结构，2 使用js