JavaScript Having to click Twice to get one response having to click twice on everything,having to click mouse

I have made a dropdown that appears on click on a button. Pretty simple, except for how I have to click twice to get the js function to execute. After I click it the first, it appears and disappears like it should - taking only one click. I have no clue why it would require this and have searched for fixes, but none of them seem to work.

Here is my HTML:

<ul class="resources-menu">
    <li>
        <button onclick="res()" id="resbut" onblur="setTimeout('reshide()', 175)">Resources</button>
        <ul id="resblock">
            <li style="padding-bottom: 20px; text-align:center;padding-top:25px">
                <button onclick="dirlnk()">Directory</button>
            </li>
        </ul>        
    </li>
</ul>

CSS:

.resources-menu {
    width:88px;
    float:left;
}
#resbut {
    font-weight:700;
    height:30px;
    text-decoration:underline;
    border-radius:3px;
    border-color: black;
}
ul.resources-menu, ul.resources-menu ul {
    list-style:none;
    margin:0;
    padding:0;
    position: relative;
}
#resblock {
    width: 90px;
    background-color: lightblue;
    display: none;
    position: absolute;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius:15px;
    border-top-right-radius:10px;
    border:solid;
    border-color:black;
}

JavaScript

function res() {
    if (document.getElementById('resblock').style.display == 'none') {
        document.getElementById('resblock').style.display = 'block';
        document.getElementById('resbut').style.background = "lightblue";
        document.getElementById('resbut').style.borderBottomRightRadius = "0px";
        document.getElementById('resbut').style.borderBottomLeftRadius = "0px";
        document.getElementById('resbut').style.borderBottom = "none";
        document.getElementById('resbut').style.textDecoration = "none";
    } else {
        document.getElementById('resblock').style.display = 'none';
        document.getElementById('resbut').style.background = "";
        document.getElementById('resbut').style.borderBottomRightRadius = "";
        document.getElementById('resbut').style.borderBottomLeftRadius = "";
        document.getElementById('resbut').style.borderBottom = "";
        document.getElementById('resbut').style.textDecoration = "";
    }
}
function reshide() {
    document.getElementById('resblock').style.display = 'none';
    document.getElementById('resbut').style.background = "";
    document.getElementById('resbut').style.borderBottomRightRadius = "";
    document.getElementById('resbut').style.borderBottomLeftRadius = "";
    document.getElementById('resbut').style.borderBottom = "";
    document.getElementById('resbut').style.textDecoration = "";
}
function dirlnk() {
    window.location = "/Portal/directory";
}