.category-list{
position:fixed;
top:50px;
width:20%;
margin-left:50px;
}
#subcat1 , #subcat2 , #subcat3 , #subcat4 , #subcat5 , #subcat6 , #subcat7 , #subcat8 , #subcat9 , #subcat10 {
position:fixed;
top:50px;
left:350px;
width:50%;
}
<div class="category-list" id="list-category">
<div class="list-group">
<a href="#" class="list-group-item" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';" >First item</a>
<div class="subcat" id="subcat1" style="display:none;" >
<div class="list-group">
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
</div>
</div>
一旦我离开类别划分,这就让子类别划分消失了 我想创建一个类似于购物网站中的类别和子类别 提前致谢
答案 0 :(得分:0)
.subcat
消费者
onmouseout="document.getElementById('subcat1').style.display = 'none';"
。
您可以使用
onmouseover="document.getElementById('subcat1').style.display = 'block';"
在.subcat
上。
.category-list{
position:fixed;
top:50px;
width:20%;
margin-left:50px;
}
.subcat{
margin-left: 60px;
position:fixed;
}
&#13;
<div class="category-list" id="list-category">
<div class="list-group">
<a href="#" class="list-group-item" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';" >First item</a>
<div class="subcat" id="subcat1" style="display:none;" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';" >
<div class="list-group">
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
</div>
</div>
&#13;