HTML：

Question

我已经查看了其他问题，但似乎没有人解释我遇到的问题。我想为现有的导航栏创建一个下拉菜单，我认为这是我对这些类命名的方式的问题。

以下是导航栏的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;
}

我不这样做，菜单不会下降。有人可以帮忙吗？非常感谢！

Answer 1

您在悬停时显示菜单的选择器为.extendMenuClass:hover .extendedDiv，但.extendedDiv不是.extendMenuClass的子项。更新了它，以便它是一个孩子，并且该选择器将起作用。

然后您需要从overflow: hidden;移除.customMenu，因为.extendedDiv会在.customMenu下方/外部出血，如果隐藏溢出则会隐藏。

.customMenu {
list-style-type: none;
margin: 0;
padding: 0;
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;
}

<ul class="customMenu">
    <li class="customList"><a class="menuActif" href="#">Home</a></li>
    <li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a>
    <div class="extendedDiv">
        <a href="...">Paris</a>
        <a href="...">Lyon</a>
        <a href="...">Toulouse</a>
    </div></li>
    <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>

Answer 2

导航的常用语法是在其他无序列表中嵌套无序列表。

因此您可以将其设置为：

<ul class="main-nav">
    <li>1</li>
    <li class="dropdown">2
        <ul class="dropdown-list">
            <li>2.1</li>
            <li>2.2</li>
            <li>2.3</li>
    </li>
    <li>3</li>
</ul>

让父母和子女元素保持秩序要容易得多。

我只是设置它更容易让您关注并不断添加项目：

HTML：

<ul class="customMenu">
    <li style="background:red;"><a href="#">Home</a></li>
    <li class="extend"><a href="#">Cities</a>
        <ul class="dropdown">
            <li><a href="#">Paris</a></li>
            <li><a href="#">Lyon</a></li>
            <li><a href="#">Toulouse</a></li>
        </ul>
    </li>
    <li><a href="#">Phrases</a></li>
    <li><a href="#">Bank Accounts</a></li>
    <li><a href="#">Important Notes</a></li>
    <li><a href="#">CAF</a></li>
    <li style="background: red; float: right;"><a href="#">Déconnexion</a></li>
</ul>

CSS：

ul.customMenu {
  width: 100%;
  background: #00264d;
}
ul.customMenu li {
  display: inline-block;
}
ul.customMenu li a {
  display: block;
  font-size: 23px;
  color: #fff;
  text-decoration: none;
  padding: 16px 17px;
}
ul.customMenu li a:hover {
  color: red;
}
ul.customMenu li ul.dropdown {
  display: none;
  position: absolute;
  top: 55px;
  left: -5px;
  background: red;
  overflow: hidden;
}
ul.customMenu li ul.dropdown li a {
  display: block;
  width: 100%;
  padding: 16px 20px;
}
ul.customMenu li ul.dropdown li a:hover {
  color: #fff;
  background: #cc0000 !important;
}

li.extend {
  position: relative;
}
li.extend:hover ul.dropdown {
  display: block !important;
}

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

2 个答案:

HTML：

CSS：