make the hover stay on the element that appear from it

December 30, 2021

I have a list this list contain a title

when i hover on the title a box appear that contain information like the example below

the problem is that when i move the cursor from the title to the box the box disappear

i want when i move the cursor to the box the box stay until the user finishes reading the info and move the cursor from the box then the hover disappear

how can i do that? i want to do it on hover not on click

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>

>Solution :

The solution requires changes in the nesting structure.

Embed the box in li
Keep the list item visible and the embedded box hidden
When li is hovered upon, make the embedded box visible

ul {
  margin:0;
  padding:0;
  list-style: none;
}

ul li:hover > .box {
opacity: 1;
    visibility: visible;
    min-height: 200px;
}

.box {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  background-color: #ccc;
  padding: 10px;
  text-align: right;
  border-radius: 6px;
}

<ul class="nav">
  <li class="pt pt1 active" data-cont="r1">
      <p>إصدار رخصة استثمار للمستثمر الأجنبي</p>
      <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>
      <li>
</ul>