Simple jQuery Contextual Menu Click Problem

Question

I'm absolutely trying to steer clear of plugins for this, I want something lightweight and simple. This is as far as I have gotten on a contextual menu. I can click on the li.dd a and it reveals the ul, and when I click on it again it hides the ul. What it doesn't let me do is click on anchors in the ul. Instead of linking to that anchor it hides the menu. Anything I need to do differently?

html:
  <ul class="tools">
    <li class="dd"><a href="#" class="bnt">Tools</a>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#" class="last">Item 3</a></li>
      </ul>
    </li>
  </ul>

SASS:
  .tools
    font-weight: bold
    margin: 12px 0 -12px !important
    text-align: right
    a.bnt
      border: #404041 1px solid
      color: #fff !important
      padding: 6px 15px
    ul
      background-color: #fff
      margin-top: 20px !important
      margin-left: 106px !important
      width: 210px
      a
        border-bottom: #cfcfcf 1px solid
        color: #666
        display: block
        font-weight: normal
        padding: 6px 20px
        text-align: left
        &:hover
          background-color: #000
          color: #fff
        &.last
          border-bottom: none

jQuery:
$(function() {
  $(".dd").toggle(
    function(){ 
      $("ul", this).fadeIn("fast");
      $(this).addClass('on');
          }, 
    function(){ $("ul", this).fadeOut("fast"); $(this).removeClass('on'); }
  );
});

Answer 1

Since you attached the click event to the list item that contains the anchors, that's to be expected. You can either put a dedicated element to handle the toggle events, move the event to the first anchor outside of the inner list-items, or stop propagation of click events on the anchors -

$('.dd li a').click(function(e) {
   e.stopPropagation();
});