Links not working in JavaScript drop down menu

Question

I am a beginner to JavaScript and can't figure out how to get links working within this dd menu. I'm assuming it has something to do with the javascript function closing the dropdown menu wherever you click overriding the links.

HTML

<div id="right_box">
    <div id="wrap">
        <div id="dropdown" class="ddmenu"> User Settings 
            <ul> 
                <li><a href="#">Settings</a></li>
                <li><a href="logout.php">Log Out</a></li>
            </ul> 
        </div> 
    </div>  

JavaScript

<script type="text/javascript">
     $("#dropdown").on("click", function(e){
        e.preventDefault();

        if($(this).hasClass("open")) {
            $(this).removeClass("open");
            $(this).children("ul").slideUp("fast");
        } else {
            $(this).addClass("open");
            $(this).children("ul").slideDown("fast");
        }
    });
</script>

Answer 1

It happens because you're using e.preventDefault() , remove it.
When you use it you stop the default a action.

demo