html - 垂直ドロップダウン メニューの追加

Question

既存のナビゲーションに垂直ドロップダウン メニューを追加する際のヘルプ/ガイダンスを探しています。

これが私のhtmlです：

<nav class="menu two-thirds column omega">
<ul>
    <li><a href="#about">About<br /><span>who we are</span></a>

    </li>
    <li><a href="#solutions">Solutions<br /><span>what we do</span></a>

    </li>
    <li><a href="#contact">Contact<br /><span>get in touch</span></a>

    </li>
    <li><a href="#">Support<br /><span></span></a>

    </li>
    <ul>
        <li>link one</li>
        <li>link two</li>
        <li>link three</li>
    </ul>
</ul>

ここに私のCSSがあります:

    nav ul {
    float: right;
    height: 61px;
}
nav li {
    list-style: none;
    display: block;
    float: left;
    margin-top: -6px;
    margin-bottom: 0;
}
nav a, nav a:visited, nav a:focus {
    display: block;
    height: 63px;
    padding: 20px 20px 0 20px;
    text-decoration: none;
    color:#666;
    font-weight : 600;
    border-top: 3px solid #000;
    margin-top: 1px;
}
nav a:hover {
    color: red;
    border-top-color: #c1c1c1;
}
nav a.active, nav a.active:focus {
    /*color: #37b1ff;*/
    /*border-top-color: #37b1ff;*/
    color: #ea0101;
    border-top-color: #ea0101;
    -webkit-transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    -moz-transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    -o-transition:color 0.3s ease, border-top-color 0.3s ease, background-color 0.3s ease;
    transition:color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
nav a.active:hover {
    color: #000;
    /*border-top-color: #37b1ff;*/
    border-top-color: #ea0101;
}
nav a span {
    color: #c1c1c1;
    font-size: 12px;
    font-weight : normal;
}

私がやりたいのは、「サポート」項目から単純な垂直ドロップダウン メニューを追加することです。

ご協力いただきありがとうございます。