Untitled

<nav>

    <ul class="cf">

        <li><a class="dropdown" href="#">Menu Item 2</a>

            <ul>

                <li><a href="#">Sub-menu Item 1</a></li>

                <li><a href="#">Sub-menu Item 2</a></li>

                <li><a href="#">Sub-menu Item 3</a></li>

            </ul>

            </li>

    </ul>

</nav>

nav ul {

  -webkit-font-smoothing:antialiased;

  text-shadow:0 1px 0 #FFF;

    background: #ddd;

    list-style: none;

    margin: 0;

    padding: 0;

    width: 100%;

}

nav li {

    float: left;

    margin: 0;

    padding: 0;

    position: relative;

    min-width: 25%;

}

nav a {

    background: #ddd;

    color: #444;

    display: block;

    font: bold 16px/50px sans-serif;

    padding: 0 25px;

    text-align: center;

    text-decoration: none;

    -webkit-transition: all .25s ease;

       -moz-transition: all .25s ease;

        -ms-transition: all .25s ease;

         -o-transition: all .25s ease;

            transition: all .25s ease;

}

nav .dropdown:after {

    content: ' ▶';

}

nav .dropdown:hover:after{

  content:'\25bc'

}

nav li:hover a {

    background: #ccc;

}

nav li ul {

    float: left;

    left: 0;

    opacity: 0;

    position: absolute;

    top: 35px;

    visibility: hidden;

    z-index: 1;

    -webkit-transition: all .25s ease;

       -moz-transition: all .25s ease;

        -ms-transition: all .25s ease;

         -o-transition: all .25s ease;

            transition: all .25s ease;

}

nav li:hover ul {

    opacity: 1;

    top: 50px;

    visibility: visible;

}

nav li ul li {

    float: none;

    width: 100%;

}

nav li ul a:hover {

    background: #bbb;

}

/* Clearfix */

.cf:after, .cf:before {

    content:"";

    display:table;

}

.cf:after {

    clear:both;

}

.cf {

    zoom:1;

}•