CSS only dropdown not showing all elements at hover

I've created a CSS only dropdown menu with overflow:hidden but I'm experiencing some issues under Chrome. When I hover over the dropdown box, only a part of the elements are appearing at first. After moving down the cursor to the list the rest appears too but sometimes on hover out the rest which appeared later will remain on screen till i hover over the dropdown again.

.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 {	
    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 {	
	position: absolute;
	right: 11px;
	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>	
</div>

JSFiddle

I would appreciate any help.

Solution

It is working on Chrome. I hovered over the drop down, and the list box appeared perfectly; and when I moved the mouse off the drop down, the list vanished as it should. Try it on a laptop.