Мое выпадающее меню HTML не работает, пожалуйста, помогите?

---

Всякий раз, когда загружается html-файл, он появляется с маркерами и без текста (плюс команда наведения мыши тоже не работает)

Вот этот код:

.clearfix:after {
content: "";
display: table;
}
.nav-wrapper {
   width:100%;
   background: #999;
}
 
.nav-menu {
   position:relative;
   display:inline-block;
}
 
.nav-menu li {
   display: inline;
   list-style-type: none;
}
 
.sub-menu {
   position:absolute;
   display:none;
   background: #ccc;
}
.nav-menu ul li:hover > ul {
   display:inline-block;
}

<div class="nav-wrapper">
</div>
<ul>
<ul class="clearfix">
<li><a href="HOME"></a></li><li><a href="MUSIC"></a></li><li><a href="VIDEOS"></a></li><li><a href="DISCUSSION/ABOUT"></a></li></ul>

Что я уже пробовал:

Я пробовал проверять незамкнутые подсказки, но ничего не нашел. Я новичок в кодировании, следовал учебнику онлайн из WikiHow для этого кода.

---