我试图将子菜单放置在CSS网格中的主菜单下,同时将鼠标悬停在多个主菜单组合上。我不知道如何在CSS网格中定位子菜单。
我从这里改编了HTML和CSS代码:https://css-tricks.com/solved-with-css-dropdown-menus/
工作:当我将鼠标悬停在主菜单上时,会出现子菜单
不工作:来自多个主菜单组件的所有子菜单都出现在相同的位置,我不知道如何将它们放在主菜单组件的正下方。
HTML
<ul>
<li class="home menu"><a href="#home.html">Home</a>
<ul class="home-dropdown">
<li><a href="#vocalcoaching">Vocalcoaching</a></li>
<li><a href="#circlesinging">Circlesinging</a></li>
</ul>
</li>
<li class="uber menu"><a href="#uber.ich.html">Über mich</a></li>
<li class="vocal menu"><a href="#">Vocalcoaching</a>
<ul class="vocal-drop">
<li><a href="#vocalcoaching">Gesangunterricht</a></li>
<li><a href="#songwriting">Songwriting</a></li>
<li><a href="#tech">Technische Geräte</a></li>
</ul>
</li>
<li class="circle menu"><a href="#">Circlesinging</a>
<ul class="circle-drop">
<li><a href="#what">Was ist Was</a></li>
<li><a href="#volume1">Volume 1</a></li>
<li><a href="#volume2">Volume 2</a></li>
<li><a href="#volume3">Volume 3</a></li>
</ul>
</li>
CSS
ul {
display:grid;
grid-template-columns: repeat(7, minmax(10%, 1fr));
justify-items: center;
margin: 5% 10%;
text-align: left;
}
ul li {
padding: 2% 0;
}
li {
list-style-type: none;
display: block;
transition-duration: 1.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.15s ease;
margin-top: 1rem;
left: 0;
display: none;
padding:0;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
background-color:beige;
}
ul li:hover > ul,
.home-dropdown li .home-dropdown:hover {
margin-right: 60%;
}
ul li ul li {
clear: both;
width: 100%;
margin-top:2%;
}
我无法使用CSS网格在特定菜单菜单的正下方对齐子菜单位置
发布于 2019-06-13 04:36:30
您只需在主菜单li
项中添加position: relative;
即可。
您的子菜单(ul li ul
)是position: absolute;
,因此它们的父li
需要position: relative;
属性集。绝对定位的元素将自己定位到最近的非静态元素,因此没有将父主菜单项设置为相对,它们将自己全部定位到一个容器元素。
ul {
display:grid;
grid-template-columns: repeat(7, minmax(10%, 1fr));
justify-items: center;
margin: 5% 10%;
text-align: left;
}
ul li {
padding: 2% 0;
}
li {
list-style-type: none;
display: block;
transition-duration: 1.5s;
position: relative;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.15s ease;
margin-top: 1rem;
left: 0;
display: none;
padding:0;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
background-color:beige;
}
ul li:hover > ul,
.home-dropdown li .home-dropdown:hover {
margin-right: 60%;
}
ul li ul li {
clear: both;
width: 100%;
margin-top:2%;
}
<ul>
<li class="home menu"><a href="#home.html">Home</a>
<ul class="home-dropdown">
<li><a href="#vocalcoaching">Vocalcoaching</a></li>
<li><a href="#circlesinging">Circlesinging</a></li>
</ul>
</li>
<li class="uber menu"><a href="#uber.ich.html">Über mich</a></li>
<li class="vocal menu"><a href="#">Vocalcoaching</a>
<ul class="vocal-drop">
<li><a href="#vocalcoaching">Gesangunterricht</a></li>
<li><a href="#songwriting">Songwriting</a></li>
<li><a href="#tech">Technische Geräte</a></li>
</ul>
</li>
<li class="circle menu"><a href="#">Circlesinging</a>
<ul class="circle-drop">
<li><a href="#what">Was ist Was</a></li>
<li><a href="#volume1">Volume 1</a></li>
<li><a href="#volume2">Volume 2</a></li>
<li><a href="#volume3">Volume 3</a></li>
</ul>
</li>
</ul>
发布于 2019-06-13 04:14:53
.outer {
display: grid;
grid-template-columns: repeat(7, minmax(10%, 1fr));
}
li {
list-style-type: none;
}
.dropdown {
display: none;
padding: 0;
}
.menu:hover>.dropdown,
.dropdown:hover {
display: block;
}
<ul class="outer">
<li class="home menu"><a href="#home.html">Home</a>
<ul class="dropdown home-dropdown">
<li><a href="#vocalcoaching">Vocalcoaching</a></li>
<li><a href="#circlesinging">Circlesinging</a></li>
</ul>
</li>
<li class="uber menu"><a href="#uber.ich.html">Über mich</a></li>
<li class="vocal menu"><a href="#">Vocalcoaching</a>
<ul class="dropdown vocal-drop">
<li><a href="#vocalcoaching">Gesangunterricht</a></li>
<li><a href="#songwriting">Songwriting</a></li>
<li><a href="#tech">Technische Geräte</a></li>
</ul>
</li>
<li class="circle menu"><a href="#">Circlesinging</a>
<ul class="dropdown circle-drop">
<li><a href="#what">Was ist Was</a></li>
<li><a href="#volume1">Volume 1</a></li>
<li><a href="#volume2">Volume 2</a></li>
<li><a href="#volume3">Volume 3</a></li>
</ul>
</li>
https://stackoverflow.com/questions/56569519
复制相似问题