Drop down

by Emily Humphrey

HTML

<div class="drop-down-ctn">
    <div class="drop-down">
        <span class="dd-q">How Many Apples?</span>
        <ul>
            <li><a href="#" class="dd-a">1 Apples</a></li>
            <li><a href="#" class="dd-a">2 Apples</a></li>
            <li><a href="#" class="dd-a">3 Apples</a></li>
            <li><a href="#" class="dd-a">4 Apples</a></li>
        </ul>
    </div>
</div>

<div class="drop-down">
    <span class="dd-q">How Many Oranges?</span>
    <ul>
        <li><a href="#" class="dd-a">1 Oranges</a></li>
        <li><a href="#" class="dd-a">2 Oranges</a></li>
        <li><a href="#" class="dd-a">3 Oranges</a></li>
        <li><a href="#" class="dd-a">4 Oranges</a></li>
        <li><a href="#" class="dd-a">5 Oranges</a></li>
        <li><a href="#" class="dd-a">6 Oranges</a></li>
        <li><a href="#" class="dd-a">7 Oranges</a></li>
        <li><a href="#" class="dd-a">8 Oranges</a></li>
    </ul>
</div>

<div class="drop-down">
    <span class="dd-q">How Many Banannas?</span>
    <ul>
        <li><a href="#" class="dd-a">1 Banannas</a></li>
        <li><a href="#" class="dd-a">2 Banannas</a></li>
        <li><a href="#" class="dd-a">3 Banannas</a></li>
    </ul>
</div>

CSS

body{
	background:#E6E2DB;
	color:#494947;
	font-family: "Myriad Pro", Frutiger, "Frutiger Linotype", Helvetica, Arial, sans-serif;
	font-size:16px;
	overflow-y: auto;
	padding:40px;
	margin:0;
}
div.drop-down-ctn{
    height:36px;
    overflow:visible;
}
div.drop-down{
    display:block;
    position:relative;
    z-index:2;
    font-size:1em;
    background: rgba( 255, 255, 255, 1);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: solid 1px #ccc;
    width:310px;
    overflow:hidden;
    margin:10px;
}
.dd-q,
div.drop-down ul li a{
    display:block;
    font-size:1em;
    padding:10px 8px 7px 10px;
}
div.drop-down ul li a{
    border-bottom:1px #ccc solid;
}
div.drop-down ul li a:hover{
    background:#eee;
}
div.drop-down ul li:first-of-type a{
    border-top:1px #ccc solid;
}
div.drop-down ul li:last-of-type a{
    border-bottom:none;
}

div.drop-down ul{
    display:none;
}
div.drop-down:hover ul{
    display:block;
}
div.drop-down ul li{
    
}

ul, li{
    padding:0;
    list-style:none;
    margin:0;
}
}