Кодирование горизонтального выпадающего списка оставляет ссылки друг на друга

Я пытаюсь закодировать выпадающее меню, в котором элемент зависания над списком отображает список ссылок по горизонтали.

Что происходит с моим кодом прямо сейчас, так это то, что все ссылки находятся прямо друг над другом, и я не могу для жизни понять, как их исправить.

Я пробовал добавлять высоту и ширину, а затем настраивал прописку, поля, вы называете это. Как-то используя display: inline; недостаточно для этого.

Если бы кто-нибудь мог помочь мне в этом, это было бы высоко оценено.

<header>
    <nav>
        <div class="container">
            <div class="wrapper">
                <h1><img alt="logo" src="logosmall.jpg" />
                    <a href="home.html"><strong>New Ideas</strong>Education</a>
                </h1>
                <ul>
                    <li><a href="index.html" class="current">about us</a></li>
                    <li>teachers
                        <ul>
                            <li>Literature</li>
                            <li>International</li>
                            <li>Staff</li>
                        </ul>
                    </li>
                    <li><a href="index-2.html">lessons</a></li>
                    <li><a href="index-3.html">reviews</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

И CSS:

ul {
    list-style-type: none;
    display: inline;
}

header nav {
}

header nav ul {
    background: #fff;
    padding: 2px 0 0 0;
    list-style: none;
    position: relative;
    float: right;
    display: inline;
}

header nav ul:after {
    content: "";
    clear: both;
    display: block;
}

header nav ul ul:after {
    content: "";
    clear: both;
    display: inline;
    margin: 0 20px 0 0;
}

header nav ul li {
    float: left;
    padding: 10px 20px;
    text-transform: uppercase;
    color: #757575;
    display: inline;
}

header nav ul li:hover > ul {
    color: #06cbe2;
    display: inline-table;
    padding: 5px 60px;
    margin: 0 20px 0 0;
    float: left;
    position: absolute;
}

header nav ul li:hover a {
    color: #06cbe2;
}

header nav ul li a {
    display: inline;
    color: #757575;
    text-decoration: none;
    text-transform: uppercase;
}

header nav ul ul {
    background: #fff;
    padding: 0px 20px 0px 0px;
    list-style: none;
    position: absolute;
    float: left;
    display: none;
}

header nav ul ul li {
    position: absolute;
    display: inline;
    margin: 0 30px 0 0;
    color: #757575;
    text-transform: uppercase;
    padding: 10px -60px;
    font-size: 10pt;
}

header nav ul ul li a {
    padding: 10px -60px;
    color: #757575;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-table;
    font-size: 6pt;
}

header nav ul ul li a:hover a {
    color: #06cbe2;
}