我想知道是否可以使用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>
答案 0 :(得分:0)
它在语义上是不正确的,虽然它在悬停时显示,但是这样做
.menu_opcje:hover div {
display: block;
}
示例代码段
.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;