从导航栏HTML CSS的下拉菜单中没有任何内容

我浏览了其他问题，但似乎都无法解释我遇到的问题。我想为一个已经存在的导航栏创建一个下拉菜单，我认为这是我命名类的方式的问题。

这是我的导航栏的HTML代码

<ul class="customMenu">
    <li class="customList"><a class="menuActif" href="#">Home</a></li>
    <li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a></li>
    <div class="extendedDiv">
        <a href="...">Paris</a>
        <a href="...">Lyon</a>
        <a href="...">Toulouse</a>
    </div>
    <li class="customList"><a href="#">Phrases</a></li>
    <li class="customList"><a href="#">Bank Accounts</a></li>
    <li class="customList"><a href="#">Important Notes</a></li>
    <li class="customList"><a href="#">CAF</a></li>
    <li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li>
</ul>

这是我尝试实现的CSS：

.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00264d;
position: fixed;
top: 0;
width: 100%;
}
.customList {
  float: left;
}

.customList a, .extendMenu{
  font-family: Sans Serif;
  font-size: 23px;
  text-decoration: none;
  text-align: center;
  padding: 16px 17px;
  display: block; 
  color: white;
}

.customList a:hover, .extendMenuClass:hover .extendMenu{
  background-color: #00264d;
  color: red;
}

.menuActif{
  background-color: red;
  color: red;
}

.menuActif:hover{
  background-color: white;
  color: #00264d;
}

.customList.extendMenuClass{
  display: inline-block;
}

.extendedDiv{
  display: none;
  background-color: #00264d;
  position: absolute;
  min-width: 200px;
  box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2);
  z-index: 1;
}

.extendedDiv a{
  display: block;
  color: white;
  padding: 15px 15px;
}

.extendedDiv a:hover{
  color: red;
}

.extendMenuClass:hover .extendedDiv{
  display: block;
}

否则，菜单将不会下拉。有人可以帮忙吗？非常感谢！