css如何设置二级菜单有下边框

可以通过CSS选择器和属性来为二级菜单设置下边框。

假设你的HTML结构是这样的：

<ul class="menu">
  <li>一级菜单</li>
  <li>
    <a href="#">二级菜单</a>
    <ul class="submenu">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
  <li>一级菜单</li>
</ul>

你可以使用如下的CSS选择器和属性来为子菜单设置下边框：

.menu li .submenu {
  border-bottom: 1px solid #ccc;
}

这样就可以为所有二级菜单添加下边框。如果你只想为特定的二级菜单添加下边框，可以使用对应的CSS选择器来匹配它们。例如，如果你想为第二个二级菜单添加下边框，可以使用如下的CSS选择器：

.menu li:nth-child(2) .submenu {
  border-bottom: 1px solid #ccc;
}

这里使用了:nth-child()伪类来选择第二个li元素，然后再选择它下面的.submenu元素来设置下边框。

相关问题

如何设置二级菜单有下边框

要设置二级菜单有下边框，可以使用CSS中的伪元素 `::after` 或 `::before`。以下是一个示例：

HTML代码：

<ul class="menu">
  <li>一级菜单1
    <ul class="submenu">
      <li>二级菜单1</li>
      <li>二级菜单2</li>
      <li>二级菜单3</li>
    </ul>
  </li>
  <li>一级菜单2</li>
  <li>一级菜单3</li>
</ul>

CSS代码：

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu > li {
  display: inline-block;
  position: relative;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ccc;
}

.submenu > li {
  display: block;
  padding: 5px;
}

.menu > li:hover .submenu {
  display: block;
}

.submenu::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  bottom: -1px;
  left: 0;
}

在上面的CSS代码中，我们给二级菜单 `.submenu` 设置了 `position: absolute`，让它相对于父元素 `.menu > li` 定位。并且给 `.submenu` 设置了 `display: none`，在一级菜单 `.menu > li` 上添加了 `:hover` 伪类选择器，当鼠标悬停在一级菜单上时，会显示出二级菜单。

然后，我们使用 `::after` 伪元素为二级菜单添加下边框。设置 `content: ""` 表示该伪元素没有内容，但是它的宽度和高度都是有值的。我们将它的宽度设置为100%，高度设置为1px，颜色设置为灰色。然后将它的位置设置为 `position: absolute`，距离二级菜单底部1像素的位置，这样就能够在二级菜单下面添加一条下边框了。

css聚焦一级菜单后一直选中二级菜单

您可以使用CSS伪类选择器来实现这个效果。当一级菜单被聚焦时，您可以将其后面的二级菜单设置为可见，并使用:focus-within伪类选择器来保持二级菜单的可见状态。以下是一个示例CSS代码：

/* 隐藏所有二级菜单 */
ul ul {
  display: none;
}

/* 当一级菜单被聚焦时，显示其后面的二级菜单 */
li:focus-within > ul {
  display: block;
}

在HTML中，您需要使用tabindex属性来使一级菜单能够聚焦。例如：

<ul>
  <li tabindex="0">一级菜单
    <ul>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li tabindex="0">一级菜单
    <ul>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
</ul>

这将使每个一级菜单能够被聚焦，并且当聚焦时，其后面的二级菜单将保持可见状态。