Question

我想知道是否可以使用div创建一个子菜单？所有在线教程都使用这个ul li的东西。我不知道如何通过将鼠标悬停在某个选项上来激活我的子菜单。我应该为“导演”div添加新课程吗？打印照片和代码。

HTML：

.menu_opcje {
  float: left;
  min-width: 100px;
  text-align: center;
  border-right: dotted 2px black;
  padding: 10px;
}
.menu_wysuwane {
  min-width: 100px;
  text-align: center;
  border-bottom: dotted 2px black;
  padding: 10px;
  display: none;
}
.menu_wysuwane:hover {
  background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
  background-color: lightgray;
  cursor: pointer;
}

<div id="menu">
  <div class="menu_opcje">Strona główna</div>
  <div class="menu_opcje">Galeria</div>
  <div class="menu_opcje">Reżyserzy
    <div>
      <div class="menu_wysuwane">Quentin Tarantino</div>
      <div class="menu_wysuwane">Bracia Coen</div>
      <div class="menu_wysuwane">Wes Anderson</div>
    </div>
  </div>
</div>

Answer 1

它在语义上是不正确的，虽然它在悬停时显示，但是这样做

.menu_opcje:hover div {
  display: block;
}

示例代码段

＆＃13;

.menu_opcje {
  float: left;
  min-width: 100px;
  text-align: center;
  border-right: dotted 2px black;
  padding: 10px;
}
.menu_wysuwane {
  min-width: 100px;
  text-align: center;
  border-bottom: dotted 2px black;
  padding: 10px;
  display: none;
}
.menu_wysuwane:hover {
  background-color: white;
}
.menu_opcje:hover,
.sidebar_opcje:hover {
  background-color: lightgray;
  cursor: pointer;
}
.menu_opcje:hover div {
  display: block;
}

＆＃13;

<div id="menu">
  <div class="menu_opcje">Strona główna</div>
  <div class="menu_opcje">Galeria</div>
  <div class="menu_opcje">Reżyserzy
    <div>
      <div class="menu_wysuwane">Quentin Tarantino</div>
      <div class="menu_wysuwane">Bracia Coen</div>
      <div class="menu_wysuwane">Wes Anderson</div>
    </div>
  </div>
</div>

＆＃13;

带div的子菜单

1 个答案: