Even easier dropdown menu

HTML

<div class="dropdown-menu-container">
    <div id="button-1" class="menu-button">
        <div class="button-style">Manage</div>
        <ul id="dropdown-1" class="dropdown-menu">
            <li>+ Component</li>
            <li>+ Pattern</li>
            <li>+ Page</li>
            <li>Edit guide</li>
        </ul>
    </div>
</div>

CSS

.dropdown-menu-container {
    height: auto;
    position: relative;
    margin-left: 40px;
    width: 300px;
}   

.menu-button {
    cursor: pointer;
    display: block;
    position: relative;
    text-align: right;
    float: right;
}

.dropdown-menu {
    width: auto;
    display: block;
    border: 2px solid red;
    position: absolute;
    visibility: hidden;
    -webkit-padding-start: 0px;
    opacity: 0;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    top:12px;
    right: 0;
    width: auto;
    float: none;
}

.visible {
    visibility: visible;
    opacity: 1;
}

.button-style {
    border: 2px solid red;
}

ul.dropdown-menu > li {
    color: blue;
    list-style-type: none;
    min-width: 100px;
    text-align: left;
}

ul.dropdown-menu > li:hover {
    color: green;
}

JavaScript

// Make menu options visible by adding class with visibility on button click
$("#button-1").click(function(){
  event.stopPropagation();
    $("ul.dropdown-menu").toggleClass("visible");
      });

// Keep visible class on menu options when menu options are clicked on
$("#dropdown-1").click(function(){
  event.stopPropagation();
    $("ul.dropdown-menu").addClass("visible");
      });

// Make menu options disappear when user clicks on other parts of the page
 $(document).on("click", function () {
    $("ul.dropdown-menu").removeClass("visible");
      });