On this example, the static html code for menu use a dotted border on right for each menu item. The last menu item will have a special “li” class where the border is set to “none”, to can have the dotted separator just between two menu items.

<ul>
<li><a href="about.html">who we are<</a></li>
<li><a href="what-we-do.html">what we do</a></li>
<li><a href="partners">partners.html</a></li>
<li><a href="news-events.html">news &amp;amp;amp;amp;amp; events</a></li>
<li class="last"><a href="contact.html">Contact</a></li>
</ul>

Ok, but this part of your code will look different when you are integrating it in WordPress for instance. Example:

<ul id="menu">
<?php wp_list_pages('sort_column=menu_order&amp;amp;title_li=&amp;amp;depth=3&amp;amp;hide_empty=0'); ?>
</ul>

Now, the last menu item will have also the separator. If with “li” tag you can defines each item in the list, the “ul” tag defines the list. On WordPress, in this case, you cannot style a single item list without a small jQuery code inserted in your header.php

$(document).ready(function() {
$("#menu li:last").addClass("last");
});

Now the menu look ok and on WordPress. You can apply in same way and a class for “first” list item.

Download testking SSCP tutorial and testking mcts guide to find a quick tip about how add css class to your wordpress lists. Our testking mcse course includes the complete information about wordpress, Drupal, ajax and other web applications.

Published on: April 14th in Tutorials .
Post tags: css, fix, javascript, jquery, list, menu, tip, tutorial, Wordpress