I am facing an issue with a list where each item has a title. Upon hovering over the title, an info box appears but disappears when moving the cursor to the box itself.
The requirement is for the box to remain visible even when the cursor moves from the title to the box. How can this be achieved?
ul {
margin:0;
padding:0;
list-style: none;
}
ul li + .box {
opacity: 0;
visibility: hidden;
max-height: 0;
}
ul li:hover + .box {
opacity: 1;
visibility: visible;
min-height: 200px;
}
.box {
background-color: #ccc;
padding: 10px;
text-align: right;
border-radius: 6px;
}<ul class="nav">
<li class="pt pt1 active" data-cont="r1">
<p>إصدار رخصة استثمار للمستثمر الأجنبي</p>
</li>
<div class="box">
<div class="steps">
<div>
<p>تضاف قيمة 10,000ر.س للاشتراك في خدمات مراكز علاقات المستثمرين بوزارة الاستثمار في السنة الأولى و 60,000 ر.س في السنوات التالية / سنة </p>
</div>
<div>
<p>هذا الإجراء يتطلب إنشاء حساب جديد في حال عدم وجوده</p>
</div>
<div>
<p>هذا الإجراء مؤتمت</p>
</div>
<div>
<p>هذا الإجراء يتطلب الدفع</p>
</div>
</div>
</div>
</ul>