Question

我的导航有一个下拉菜单。现在这些下拉菜单项左右有边框，但是在下拉项的最后一项上，我不想有右边框。

HTML

<ul id="mainNav">
<li>
  <a href="#">Link1</a>
  <ul class="dropDown" style="dislay:none;">
   <li><a href="link.html">SubLinkA</a></li>
   <li><a href="link.html">SubLinkB</a></li>
  </ul>
</li>
<li>
   <a href="#">Link2</a>
   <ul class="dropDown" style="dislay:none;">
     <li><a href="link.html">SubLinkC</a></li>
     <li><a href="link.html">SubLinkD</a></li>
  </ul>
</li>
<li>
  <a href="#">Link3</a>
  <ul class="dropDown" style="dislay:none;">
     <li><a href="link.html">SubLinkE</a></li>
     <li><a href="link.html">SubLinkF</a></li>
  </ul>
</li>
</ul>

CSS

.dropDown li {
border: 1px solid black;
}

现在当使用悬停在例如Link3时，它会显示下拉列表。在那个下拉列表中，现在双方都有边界，但我希望有边界权利：0;在具有SubLinkF链接的li项目上。以前的下拉项目也是如此。

如果我像这样放入jQuery $（'。dropDown li：last'）。css（border-right：0）;它只会从最后一个项目中丢失边界:(

感谢您的帮助！

Answer 1

将您的代码更改为

$('.dropDown:last li').css(border-right:0);

你不想要最后一个li元素，你想要最后一个ul元素中的所有li元素。

Answer 2

你应该在上一个UL中添加一个类，如“last”。然后在你的CSS中：

.last > li { border-right: 0 }

我坚信你应该删除css中的边框而不是javascript。

使用jQuery从菜单中删除边框

2 个答案: