Блог

У меня есть навигация, в которой есть выпадающее меню. Теперь эти пункты выпадающего меню имеют границы справа и слева, но в последнем пункте выпадающего списка я бы не хотел иметь границу справа.

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, отображается выпадающий список. В этом выпадающем списке теперь есть граница с обеих сторон, но я хотел бы иметь border-right: 0; для элемента li, у которого есть ссылка SubLinkF. То же самое относится и к предыдущим элементам выпадающего списка li.

Если я введу в jQuery вот так $(‘.dropDown li:last’).css(border-right: 0); это потеряет границу только с самого последнего элемента li 🙁

Спасибо за помощь!

Измените свой код на

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

Вам не нужен последний li-элемент, вы хотите, чтобы все li-элементы были в последнем ul-элементе.

вы должны добавить класс к последнему UL, например «last». затем в вашем css:

.last > li { border-right: 0 }

Я твердо убежден, что вам следует удалять границу в css, а не javascript.