CSS только выпадающий список, не показывающий все элементы при зависании

Question

Я создал раскрывающееся меню только для CSS с переполнением: скрыто, но у меня возникают некоторые проблемы в Chrome. Когда я наводил курсор на раскрывающийся список, сначала появляется только часть элементов. После того, как вы переместили курсор на список, остальные тоже появятся, но иногда при наведении курсора остальные, которые появляются позже, останутся на экране, пока я снова не вернусь к выпадающему списку.

.c-dropdown { 
 
    width: 213px; 
 
    position:relative; 
 
    top:23px; 
 
    left:15%; 
 
    display:inline-block; 
 
    overflow:hidden; 
 
    border:1px solid #fb6b1e; 
 
} 
 
.c-dropdown:hover { 
 
    overflow:visible; 
 
} 
 
    .c-dropdown__container { 
 
     width: 100%; 
 
     height:30px; 
 
     position:relative; 
 
    } 
 
     .c-dropdown__list { 
 
      width: 100%; 
 
      list-style:none; 
 
      position:absolute; 
 
      margin: 1px 0 0; 
 
      padding:0; 
 
      z-index:100; 
 
     } 
 
      .c-dropdown__item { 
 
       border-bottom: 1px solid #ccc; 
 
       border-left: 1px solid #ccc; 
 
       border-right: 1px solid #ccc; 
 
       line-height: 30px; 
 
       background:#fff; 
 
      } 
 
      .c-dropdown__item:first-child { 
 
       border:0; 
 
       background:none; 
 
      } 
 
       .c-dropdown__item-link { 
 
        font-family: "Roboto", sans-serif; 
 
        font-weight: 400; 
 
        font-size: 0.938em; 
 
        width:100%; 
 
        height:100%; 
 
        display:inline-block; 
 
        text-decoration:none; 
 
        color: #fb6b1e;      
 
       } 
 
       .c-dropdown__item .c-dropdown__item-link:before { 
 
        content:" "; 
 
        padding-left:10px; 
 
       }     
 
       .c-dropdown__item:first-child:hover .c-dropdown__item-link { 
 
        background:none; 
 
        color:#fb6b1e; 
 
       } 
 
       .c-dropdown__item:hover .c-dropdown__item-link { 
 
        background:#fb6b1e; 
 
        color:#fff; 
 
       } 
 
.u-downarrow { \t 
 
    display: inline-block; 
 
    height: 10px; 
 
    width: 10px; 
 
    transform: rotate(225deg); 
 
    transform-origin: center center; 
 
    border-top: 1px solid #ccc; 
 
    border-left: 1px solid #ccc; 
 
} 
 
.u-downarrow--dropdown { \t 
 
\t position: absolute; 
 
\t right: 11px; 
 
\t top:7px; 
 
}

<div class="c-dropdown"> 
 
    <nav class="c-dropdown__container"> 
 
    <ul class="c-dropdown__list"> 
 
     <li class="c-dropdown__item"><a class="c-dropdown__item-link" href="#">Select</a></li> 
 
     <li class="c-dropdown__item"> 
 
     <a class="c-dropdown__item-link" title="Item 0" href="#">Item 0</a> 
 
     </li> 
 
     <li class="c-dropdown__item"> 
 
     <a class="c-dropdown__item-link" title="Item 1" href="#">Item 1</a> 
 
     </li> 
 
     <li class="c-dropdown__item"> 
 
     <a class="c-dropdown__item-link" title="Item 2" href="#">Item 2</a> 
 
     </li> 
 
     <li class="c-dropdown__item"> 
 
     <a class="c-dropdown__item-link" title="Item 3" href="#">Item 3</a> 
 
     </li> 
 
     <li class="c-dropdown__item"> 
 
     <a class="c-dropdown__item-link" title="Item 4" href="#">Item 4</a> 
 
     </li>  
 
    </ul> 
 
    <div class="u-downarrow u-downarrow--dropdown"></div> 
 
    </nav> \t 
 
</div>

JSFiddle

Я был бы признателен за любую помощь.

Answer 1

Работает на Chrome. Я завис над раскрывающимся списком, и окно списка появилось отлично; и когда я вытащил мышь с выпадающего списка, список исчез, как и следовало ожидать. Попробуйте это на ноутбуке.