ul li dropdown

by karin

HTML

<div id="container">
    <ul>
        <li><a href="#">test1</a></li>
        <li><a href="#">test2</a></li>
        <li><a href="#">test3</a></li>
        <li><a href="#">test4</a></li>
    </ul>
    <div class="inner-container"></div>
</div>

CSS

#container{
    position:relative;
    width:75%;
    height:300px;
    background:palegreen;
}
.inner-container{
    width:100%;
    height:100px;
    background:pink;
    margin-top:-50px;
}
ul{
    list-style-type: none;
}
ul li{
    background:#555;
    width:60px;
    position:relative;  
}
li{
    visibility:hidden; 
}
li a:hover{
    visibility:visible;
}
ul li:first-child{
    visibility:visible;
}