gpt4 book ai didi

html - 两个标签的非功能性作为下拉菜单在它们之间插入 div 标签

转载 作者:太空宇宙 更新时间:2023-11-04 07:41:25 24 4
gpt4 key购买 nike

 <body>
<div class = "CentralHeader">
<div class = "LinkBar" id = "HeaderBar" >All</div>
<div class = "searchBar">Search</div>
<div class = "SampleMenu">
<ul>
<li><a href = "#Movies">Movies</a></li>
<li><a href = "#Events">Events</a></li>
<li><a href = "#Sports">Sports</a></li>
<li><a href = "#Plays">Plays</a></li>
</ul>
</div>

</div>


<style type="text/css">
.LinkBar {
cursor: pointer;
width: 140px;
height: 37px;
border: 1px solid #c02c3a;
margin-top: 50px;
margin-left: 300px;
background-color: #c02c3a;
text-align: center;
padding-top: 9px;
color: white;
}

div.SampleMenu ul {
list-style-type: none;
width: 140px;
background-color: Grey;
margin-left: 300.5px;
padding: 0;
margin-top:0px;
display: none;
border-top: 2px solid #fff;
}

div.SampleMenu ul li {
padding: 0;
}

div.SampleMenu ul li a {
color: white;
display: block;
padding: 10px;
font-size: large;
text-align: center;
text-decoration: none;
}

#HeaderBar:hover+.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
}
</style>
</body>

当 div 标签 (class:searchBar) 被移除时,下拉功能起作用fine.To add a note , when display is set to auto for ul inside div (class:SampleMenu),它工作正常(显示下拉列表)。为什么添加 div 标签会使下拉列表消失。什么似乎阻碍了流程?

最佳答案

下拉菜单使用以下代码激活:

#HeaderBar:hover+.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
}

注意 adjacent sibling selector : +

来自 MDN:

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

当您添加 <div class = "searchBar">Search</div> 时这成为相邻的 sibling ,并且.SampleMenul ul不再是目标。

如果你想保留标记,你可以使用 general sibling combinator相反。

例子...

.LinkBar {
cursor: pointer;
width: 140px;
height: 37px;
border: 1px solid #c02c3a;
margin-top: 50px;
margin-left: 300px;
background-color: #c02c3a;
text-align: center;
padding-top: 9px;
color: white;
}

div.SampleMenu ul {
list-style-type: none;
width: 140px;
background-color: Grey;
margin-left: 300.5px;
padding: 0;
margin-top: 0px;
display: none;
border-top: 2px solid #fff;
}

div.SampleMenu ul li {
padding: 0;
}

div.SampleMenu ul li a {
color: white;
display: block;
padding: 10px;
font-size: large;
text-align: center;
text-decoration: none;
}

#HeaderBar:hover~.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
<body>
<div class="CentralHeader">
<div class="LinkBar" id="HeaderBar">All</div>
<div class="searchBar">Search</div>
<div class="SampleMenu">
<ul>
<li><a href="#Movies">Movies</a></li>
<li><a href="#Events">Events</a></li>
<li><a href="#Sports">Sports</a></li>
<li><a href="#Plays">Plays</a></li>
</ul>
</div>

</div>

关于html - 两个标签的非功能性作为下拉菜单在它们之间插入 div 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48478241/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com