Dropdown Image

by JQ Purfect

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul id="drop-nav">
    <li><a href="#"><span class="fa fa-cog"></span> Support</a>

        <ul>
            <li><a>HTML</a>

            </li>
            <li><a>CSS</a>

            </li>
            <li><a>JavaScript</a>

            </li>
        </ul>
    </li>
</ul>

CSS

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
ul li {
    display: block;
    position: relative;
    float: left;
    width:120px
}
li ul {
    display: none;
}
ul li a {
    display: block;
    background: #0174DF;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
}
ul li a:hover {
    background: #0174DF;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
}
li:hover a {
    background: #0174DF;
}
li:hover li a:hover {
    background: #000;
}
#drop-nav li ul li {
    border-top: 0px;
}