作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在为导航菜单使用一系列提交按钮(提交值将是整个站点的导航方法)。我创建了一个下拉菜单,其中包含下拉菜单中的弹出窗口。但是,我无法弄清楚如何仅隔离下拉列表中悬停的元素以显示它的弹出窗口。所有下拉项要么显示所有子菜单,要么不显示。我尝试在不同区域使用 > 和 + 子选择器。有人可以帮忙吗?
我的 CSS:
/* Dropdown Button */
.ddb-container {
width: 100%;
overflow: hidden;
background-color: #faebca;
font-family: Arial;
margin-top: 75px;
padding-left: 150px;
z-index: 1;
border-top: 3px black solid;
border-bottom: 3px black solid;
border-left: none;
border-right: none;
}
.ddb-container button {
margin: 0;
padding: 0;
float: left;
font-size: 14px;
border: none;
color: #000000;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
background-color: transparent;
}
.ddb-container button:hover {
background-color: #dbcfa4;
}
.ddb-dropdown {
float: left;
overflow: hidden;
font-size: 14px;
font-weight: bold;
}
.ddb-dropdown .dropbtn {
border: none;
outline: none;
color: #000000;
padding: 5px 10px;
background-color: transparent;
}
.ddb-dropdown .dropbtn:hover {
background-color: #dbcfa4;
}
.ddb-dropdown .dropdown-level1 {
display: none;
position: absolute;
background-color: #faebca;
min-width: 160px;
box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.ddb-dropdown:hover .dropdown-level1 {
display: block;
}
.ddb-dropdown .dropdown-level1 .dropdown-level2 {
display: none;
position: absolute;
background-color: #faebca;
min-width: 160px;
margin-left: 160px;
box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.ddb-dropdown .dropdown-level1:hover .dropdown-level2 {
display: block;
}
HTML:
<div class='ddb-container'>
<button type='submit' name='submit' value='0'>Home</button>
<div class='ddb-dropdown'>
<div class='dropbtn'>Sales</div>
<div class='dropdown-level1'><button type='submit' name='submit' value='#1'>Link 1</button><br /><br />
<button type='button'>Link 2 ></button><br />
<div class='dropdown-level2'>
<button type='submit' name='submit' value='#1'>Sublink 1</button><br />
<button type='submit' name='submit' value='#2'>Sublink 2</button><br />
<button type='submit' name='submit' value='#3'>Sublink 3</button><br /><br />
</div><br />
<button type='submit' name='submit' value='#3'>Link 3</button><br /><br />
<button type='submit' name='submit' value='#4'>Link 4</button><br /><br />
<button type='button'>Link 5 ></button><br />
<div class='dropdown-level2'>
<button type='submit' name='submit' value='#1'>Sublink 1</button><br />
<button type='submit' name='submit' value='#2'>Sublink 2</button><br />
<button type='submit' name='submit' value='#3'>Sublink 3</button><br /><br />
</div><br /><button type='submit' name='submit' value='#6'>Link 6</button><br /><br />
</div>
</div>
<div class='ddb-dropdown'>
<div class='dropbtn'>Purchasing</div>
</div>
<div class='ddb-dropdown'>
<div class='dropbtn'>Inventory</div>
</div>
<div class='ddb-dropdown'>
<div class='dropbtn'>Accounting</div>
</div>
<div class='ddb-dropdown'>
<div class='dropbtn'>Documents</div>
</div>
<div class='ddb-dropdown'>
<div class='dropbtn'>Tools</div>
<div class='dropdown-level1'>
<button type='submit' name='submit' value='#1'>Tools Link 1</button><br /><br />
<button type='submit' name='submit' value='#2'>Tools Link 2</button><br /><br />
<button type='submit' name='submit' value='#3'>Tools Link 3</button><br /><br />
<button type='button'>Tools Link 4 ></button><br />
<div class='dropdown-level2'>
<button type='submit' name='submit' value='#1'>Sublink 1</button><br />
<button type='submit' name='submit' value='#2'>Sublink 2</button><br />
<button type='submit' name='submit' value='#3'>Sublink 3</button><br /><br />
</div><br />
<button type='submit' name='submit' value='#5'>Tools Link 5</button><br /><br />
<button type='submit' name='submit' value='#6'>Tools Link 6</button><br /><br />
</div>
</div>
<div class='ddb-dropdown'>
<div class='dropbtn'>Employees</div>
</div>
<div class='ddb-dropdown'>
<div class='dropbtn'>Administration</div>
</div>
最佳答案
使用您当前拥有的 HTML,您无法通过纯 CSS 获得您想要的内容。你需要javascript。我们可以使用 CSS 重构您的 HTML。
虽然没有必要将 buttons
替换为 a
,但使用链接进行导航更有意义,请确保在 中使用正确的 url >href
属性。
我们可以通过移除 br
标签并使用相邻的同级选择器 (+
) 来实现悬停效果,但是当鼠标悬停在子菜单上时,前一个同级会失去悬停,子菜单就会消失。
通过创建层次结构,我们可以让子菜单保持事件状态,就像它们收到悬停一样,它们的父菜单也是如此。嵌套列表是标记此层次结构的常用方法。
以下是一个截断的版本,可以帮助您顺利进行。
/*Basic List Reset*/
ul.ddb-container,
ul.ddb-container ul {
padding: 0;
list-style: none;
}
/*Basic Link Reset*/
ul.ddb-container a {
text-decoration: none;
}
ul.ddb-container a:link,
ul.ddb-container a:visited {
color: #000;
}
/*Dropdown Magic*/
.ddb-container ul {
display: none;
}
.ddb-container {
width: 100%;
overflow: visible;
background-color: #faebca;
font-family: Arial;
margin-top: 75px;
padding-left: 150px;
z-index: 1;
border-top: 3px black solid;
border-bottom: 3px black solid;
border-left: none;
border-right: none;
}
.ddb-container > li {
margin: 0;
padding: 0;
display:inline-block;
font-size: 14px;
border: none;
color: #000000;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
background-color: transparent;
position:relative;
overflow:visible;
}
.ddb-container li:hover {
background-color: #dbcfa4;
}
.ddb-dropdown .dropdown-level1 {
position: absolute;
background-color: #faebca;
min-width: 160px;
box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-align:left;
top:26px;
left: 0;
}
.ddb-dropdown .dropdown-level1 .dropdown-level2 {
position: absolute;
background-color: #faebca;
min-width: 160px;
margin-left: 160px;
box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.ddb-dropdown ul > li {
padding: 1em 0;
}
.ddb-container li:hover > ul {
display:block;
}
<ul class='ddb-container'>
<li>
<a href="#">Home</a>
</li>
<li class='ddb-dropdown'>
<a href="#">Sales</a>
<ul class="dropdown-level1">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2 ></a>
<ul class='dropdown-level2'>
<li><a href="#">Link2 Sublink 1</a></li>
<li><a href="#">Link2 Sublink 2</a></li>
<li><a href="#">Link2 Sublink 3</a></li>
</ul>
</li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5 ></a>
<ul class='dropdown-level2'>
<li><a href="#">Link5 Sublink 1</a></li>
<li><a href="#">Link5 Sublink 2</a></li>
<li><a href="#">Link5 Sublink 3</a></li>
</ul>
</li>
<li><a href="#">Link 6</a></li>
</ul>
</li>
<li><a href="#">Purchasing</a></li>
</ul>
关于css - 如何在类(class)列表中只选择一个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44378792/
我是一名优秀的程序员,十分优秀!