Remove border from menu with jQuery

I have a navigation that has a dropdown menu. Now those dropdown menu items has borders on right and left, but on last item of the dropdown item, I wouldnt like to have border-right.

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;
}

Now when use hovers over for example Link3 it shows the dropdown. On that dropdown it now has border on both sides but I would like to have border-right: 0; on the li item that has SubLinkF link. Also same goes for previous dropdown li items.

If I put in jQuery like this $('.dropDown li:last').css(border-right:0); it only looses the border from very last li item :(

Thanks for help!

Change your code to

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

You don't want the last li-element, you want all li-elements in the last ul-element.

you should add a class to the last UL like "last". then in your css:

.last > li { border-right: 0 }

I strongly believe that you should be removing the border in css and not javascript.