iPad themed JS dropdown menu.

index.html

<a href="#" id="menuButton">Menu</a>

<ul id="iPadMenu" style="display:none;">
	<li><a href="">Menu Item 1</a></li>
	<li><a href="">Menu Item 2</a></li>
	<li><a href="">Menu Item 3</a></li>
	<li><a href="">Menu Item 4</a></li>
	<li><a href="">Menu Item 5</a></li>
	<li><a href="">Menu Item 6</a></li>
</ul>

script.js

document.getElementById('menuButton').onclick = function() { 
    var iPadMenu = document.getElementById("iPadMenu");

    if (iPadMenu.style.display != "block") {
        iPadMenu.style.display = "block";

        styles = '#menuButton:after { display: block; }';
    }
    else {
        iPadMenu.style.display = "none";

        styles = '#menuButton:after { display: none; }';
    }

    /* Add styles to HEAD to hide arrow */
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.id = 'newStyle';
    head.appendChild(style);
    document.getElementById("newStyle").innerHTML = styles;
 
  };

style.css

#menuButton {
    display: block;
    border: solid 1px #26445F;
    text-decoration: none;
    color: white;
    font-weight: bold;
    background-color: #45719B;
    float: left;
    padding: 3px 5px;
    margin-left: 15px;
}
#menuButton:after {
    display: none;
    position: absolute;
    content: "";
    top: 28px;
    left: 40px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #0C0D07;
}

#iPadMenu {
    position: absolute;
    list-style: none;
    top: 30px;
    left: 0;
    margin: 8px 20px 20px;
    padding: 7px;
    border: 1px solid #0C0D07;
    border-radius: 5px;
    background: #111520;
    width: 320px;
}
#iPadMenu a {
    display: block;
    margin: 0;
    padding: 7px 10px;
    background: #fff;
    color: #030303;
    font: bold 1.2em Helvetica, Arial, sans-serif;
    text-decoration: none;
    border-bottom: 1px solid #D9D9D9;
}
#iPadMenu a:hover, #iPadMenu a:active {
    color: #fff;
    background: #058cf5;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#058cf5), color-stop(100%,#015ee6));
    background: -webkit-linear-gradient(top, #058cf5 0%,#015ee6 100%);
    background: linear-gradient(top, #058cf5 0%,#015ee6 100%);
}
#iPadMenu li:first-child a {
    border-radius: 5px 5px 0 0;
}
#iPadMenu li:last-child a {
    border-radius: 0 0 5px 5px;
    border: 0;
}