所定の時間だけ複数ドロップダウンページを表示する

Question

ドロップダウンをデザインし、2番目のレベルのドロップダウンページはフォームになりました。ここでは2番目のレベルドロップダウンページを長くしたい場合は、ここにあるJavaスクリプトコードを使用します

<script> 
var timer; 
$(".parent").on("mouseover", function() { 
    clearTimeout(timer); 
    openSubmenu(); 
}).on("mouseleave", function() { 
    timer = setTimeout(
    closeSubmenu 
    , 1000); 
}); 

function openSubmenu() { 
    $(".submenu").addClass("open"); 
} 
function closeSubmenu() { 
    $(".submenu").removeClass("open"); 
} 
</script> 

そしてここ

<div class="dropdown"> 
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" style=" padding-top: 3px; padding-bottom: 3px;"> Action <span class="caret"></span> 
    </a> 
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
    <li><a href="index.php?index_edit_id=<?php echo $c_id;?>"><button class="btn btn-default btn-sm remove" ><i class="fa fa-pencil-square-o fa-lg" aria-hidden='true' style=" font-weight:10px;"> Edit-Update</i></button></a></li> 
<div class="divider"></div> 
<li class="dropdown-submenu parent"> 
    <a href="#"><i class="fa fa-hand-o-left" aria-hidden="true"style="padding-left:10px;">Edit-File</i></a> 
        <ul class="dropdown-menu submenu"> 
        Here is code of form 
       </ul> 
       </li> 
     </ul> 
</div> 

ダウン、複数のドロップを作るためのコードであり、これは私が使用しているCSSで私は編集ファイルから落下していたとき、私はちょうどたい、ページダウン、私のドロップsh所定の時間にould停止

.dropdown-submenu { 
    position: relative; 
} 
.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    right: 100%; 
    margin-top: -210px; 
    margin-left: -150px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 
.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 
.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float:left; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 
.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 
.multi-level 
{ 
    position:justify; 
    right:100%; 
    margin-left:-60px; 
} 

私を助けてください。

Answer 1

チェックこの...

<style> 
.dropdown-submenu { 
    position: relative; 
} 
.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    right: 100%; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 
.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 
.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float:left; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 
.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 
.multi-level 
{ 
    position:justify; 
    right:100%; 
} 

</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="dropdown"> 
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" style=" padding-top: 3px; padding-bottom: 3px;">Action 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
     <li> 
      <a href="index.php?index_edit_id=<?php echo $c_id;?>"> 
       <button class="btn btn-default btn-sm remove" > 
        <i class="fa fa-pencil-square-o fa-lg" aria-hidden='true' style=" font-weight:10px;"> Edit-Update</i> 
       </button> 
      </a> 
     </li> 
     <div class="divider"></div> 
     <li class="dropdown-submenu parent"> 
      <a href="#"><i class="fa fa-hand-o-left parent" aria-hidden="true"style="padding-left:10px;">Edit-File</i></a> 
      <ul class="dropdown-menu submenu"> 
       <li> 
        <form> 
         <p><input /></p> 
         <p><input /></p> 
         <p><input /></p> 
        </form> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

    <script> 
var timer; 
    $(".parent").on("mouseover", function() { 
     clearTimeout(timer); 
     openSubmenu(); 
    }).on("mouseleave", function() { 
     timer = setTimeout(
      closeSubmenu 
     , 1000); 
    }); 

    function openSubmenu() { 
     $(".submenu").show(); 
    } 
    function closeSubmenu() { 
     $(".submenu").hide(); 
    } 
</script>