Question

我和上一个孩子有点问题。我有一个下拉导航，需要使最后一个下拉列表与其余下拉列表对齐，因为文本被切断了。

正常下拉列表的CSS看起来像这样：

.mainnav ul > li > ul {
  padding: 0;
  position: absolute;
  top: 43px;
  left: -20px;
  padding-top: 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-height: 0px;
  overflow: hidden;
  -webkit-transiton: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  -transition: all 0.4s;

}

当我调整最后一个下拉列表时，我尝试使用：

.mainnav ul > li > ul:last-child{
  padding: 0;
  position: absolute;
  top: 43px;
  left: -120px;
  padding-top: 10px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  max-height: 0px;
  overflow: hidden;
  -webkit-transiton: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  -transition: all 0.4s; 
}

但是当我把它放入其中时会影响所有下拉菜单。你可以在这里看到测试网站： http://xeroproject.com/runa_tea/

我正在尝试调整IMPACT下拉列表。

感谢您的帮助。

Answer 1

.mainnav ul > li > ul:last-child选择与选择器匹配的元素的最后一个孩子的所有<ul>。

用于定位最后<ul>

中的<li>

使用

.mainnav ul > li:last-child > ul{

而不是

.mainnav ul > li > ul:last-child{

最后一个子选择器不工作

1 个答案: