サイドメニューのホバーに遅延を追加するにはどうすればよいですか？

Question

これは私のHTMLコードです：

<div id="pastIssuesBody"> 
    <ul> 
     <li><a href="#">2017</a> 
     <ul> 
      <li><a href="#">January</a> 
      <ul> 
       <li><a href="/index.php?month=Jan&year=2017">Issue I</a></li> 
       <li><a href="/index.php?month=Jan_second_issue&year=2017">Issue II</a></li> 
      </ul> 

は、これは私のCSSです：私は若干の遅延があることが日付に置くとなるよう

#pastIssuesBody ul { 
     margin: auto; 
     padding: 0; 
     list-style: none; 
     width: inherit; 
     font-size: 11.5pt; 
    } 
    #pastIssuesBody ul > li { 
     position: relative; 
     font-size: 11.5pt; 
    } 
    #pastIssuesBody li > ul { 
     position: absolute; 
     left: 50px; 
     top: 0; 
     display: none; 
    } 
    #pastIssuesBody ul > li > a { 
     display: block; 
     text-decoration: none; 
     color: #58595b; 
     background: transparent; 
     padding: 8px; 
     border: none; 
     border-bottom: 0; 
     width: 100%; 
    } 
    #pastIssuesBody ul > li > a:hover { 
     background-color:#f6f6f6; 
    } 
    #pastIssuesBody li:hover > ul { 
     display: block; 
    } 
    #pastIssuesBody ul > li > ul > li > ul { 
     width: 100%; 
     margin-left: 41px; 
     display: none; 
    } 

は、どのように私はそれを行うことができますか？ （私が今月の月があるとき） これは私のウェブサイトです：https://today.byu.edu

Answer 1

私はそれを理解しました。そのようなディスプレイをアニメーション化することはできません。そこで、変更された不透明度になるようにコードを変更しました。

#pastIssuesBody li > ul { 
    position: absolute; 
    left: 50px; 
    top: 0; 
    display: block; 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -ms-transition: opacity 1s; 
    -o-transition: opacity 1s; 
    transition: opacity 1s; 
    opacity: 0; 
} 
#pastIssuesBody ul > li > ul > li > ul { 
    width: 100%; 
    margin-left: 41px; 
    display: block; 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -ms-transition: opacity 1s; 
    -o-transition: opacity 1s; 
    transition: opacity 1s; 
    opacity: 0; 
} 
#pastIssuesBody li:hover > ul { 
    opacity: 1; 
} 

EDIT： [OK]をので、このコードは、私が領域の上にスクロールしたときに表示されるまで他の要素を引き起こすバグがありました。希望は意味をなさない。私はすべてを表示の代わりに視認性に変えました。今はすべて美しく動作します。