javascript - スクロール通知メニュー (jQuery)

Question

HTML と CSS を使用して通知 div (通知アイコンが押されるまで表示されない div) の垂直スクロール div を作成しようとしましたが、失敗しました。少なくともクロムでは、ブラウザーにスクロール バーが表示されますが、制御できません。 （その長方形をスライドできず、矢印をクリックしても何も起こりません）オーバーフローyの妥当性とスクロールの妥当性を試しましたが、何も機能しません参考までに、お互いの上にある4つの通知ボックスがあり、適切な場合にのみ表示されますアイコンがクリックされた (1 つは通知用、1 つはメッセージ用、もう 1 つはフレンドシップ リクエスト用、最後の 1 つはフォーラム通知用) HTML は次のとおりです。

<div id="infoNot" >
  <ul>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href=''><li>Foulan a accépter votre demande d'amitié</li></a>
      <a href=''><li>Foulan a poster dans le forum</li></a>
      <a href=''><li>Foulan a bla bla bla</li></a>
      <a href='' class="cMore">
      <li class="cMore">Voir toutes les notifications</li></a>
  </ul>
</div>
<div id="infoMsg">
  <ul>
      <li><img src='media/images/icons/msg.png'><p class="sender">YOLO</p>
      <p class="description">Salut, Cava? wi non pas bien</p><span></span></li>
      <li><img src='media/images/icons/msg.png'><p>Salut</p><span></span></li>
      <li><img src='media/images/icons/msg.png'><p>Salut</p><span></span></li>
  </ul>
</div>
<div id="infoForum">
  <ul>
      <a href=''><li>Foulan a repondu à votre poste dans le forum</li></a>
      <a href=''><li>L'admin a supprimer votre sujet</li></a>
      <a href=''><li>bla bla bla</li></a>
  </ul>
</div>
<div id="infoFR">
   <ul>
     <a href=''><li>Foulan foulani veut étre votre ami</li></a>
     <a href=''><li>Fataan foulani veut étre votre ami</li></a>
     <a href=''><li>Mr. X foulani veut étre votre ami</li></a>
   </ul>
</div>

CSS:

#infoNot , #infoMsg , #infoForum , #infoFR
{
    top:50px;
    left:10px;
    display: block;
    position: absolute;
    margin-top: 5px;
    visibility: hidden;
    height: 100%;
}
#infoMsg
{
    left:25px;
    height: 500px;
}
#infoNot ul , #infoMsg ul , #infoForum ul , #infoFR ul
{
    list-style: none;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
    border: 1px black solid;
    border-radius: 5px 5px 5px 5px;
}
#infoNot ul a
{
    display: block;
    width: 100%;
    height:100%;
}
#infoNot ul a:nth-child(even)
{
    color: #595959;
    background-color: #a1a1a1;
}
#infoNot ul a:nth-child(odd)
{
    color: #a1a1a1;
    background-color: #595959;
}
#infoNot ul a:hover
{
    background-color: #818181;
}
#infoMsg ul li img
{
    float:left;
    display: block;
}
#infoMsg ul li
{
    padding-top:3px;
    padding-buttom:3px;
    border-bottom: 1px solid #c4c4c2;
}
#infoMsg span
{
    clear:both;
    display: block;
}