带div的子菜单

时间:2016-10-29 19:12:56

标签: css html5

我想知道是否可以使用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>

1 个答案:

答案 0 :(得分:0)

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

.menu_opcje:hover div {
  display: block;
}

示例代码段

&#13;
&#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;
&#13;
&#13;