Dropdown list blur event

Question

I am building a dropdown list of anchor tags (not a select):

<ul>
  <li class="selected"><a href="#">List item 1</a></li>
  <li><a href="#">List item 2</a></li>
  <li><a href="#">List item 3</a></li>
  <li><a href="#">List item 4</a></li>
</ul>

When a user selected the list, it triggers a focus state which shows all items. I also want it to blur when the user clicks off of the ul or selects an item.

Is this possible?

Note: .blur() and .focus() only work with form elements.

Answer 1

Try using mouseleave() event

$( "ul" ).mouseleave(function() {
     //console.log('similar to blur');
});

Answer 2

I have just .toggle() for my dropdown

function DropDownMenu() {
  var item1 = document.getElementById("dropdownmenu1");
     $("#dropdownmenu1").toggle();
 }

, this is when I click on the dropdown. If I click elsewhere on the page, I have this;

function BlurDropDown() {
    $("#dropdownmenu1").fadeOut(1000);
}

And on my div for the rest of the page, I have set a onmousedown event

    <div id="page" onmousedown="BlurDropDown()">

My menu is placed on the master page.