如何在类列表中只选择一个子项

Question

我正在使用导航菜单的一系列提交按钮（提交值将是整个网站的导航方法）。我已经创建了一个下拉菜单，其中包含来自下拉列表的弹出按钮。但是，我无法弄清楚如何仅隔离下拉列表中的悬停元素以显示它的弹出窗口。所有下拉项都显示所有子菜单或不显示。我尝试过使用＆gt;和+不同领域的儿童选择器。有人可以帮忙吗？

我的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>

Answer 1

使用您目前拥有的HTML，您无法通过纯CSS获得所需的内容。你需要javascript。重构你的HTML我们可以用CSS做到这一点。

虽然没有必要将buttons替换为a，但使用链接进行导航更有意义，请确保在href属性中使用正确的网址。< / p>

我们可以通过移除br标签并使用相邻的兄弟选择器（+）来实现悬停效果，但是当将鼠标悬停在子菜单上时，之前的兄弟会丢失悬停和子-menu会消失。

通过创建层次结构，我们可以在子菜单接收悬停时保持子菜单处于活动状态，父级也是如此。嵌套列表是标记此层次结构的常用方法。

以下是一个截断版本，可以帮助您实现目标。

/*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>