Opening a div (a box with a list of links) after click of button

how do i display a box at the side of a button after a click?

HTML

---

<button><a href="#">Open box at side</a></button>
<div id="link-box">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</div>

CSS

---

#link-box {
  padding: 5px;
  border: 1px solid black;
}

#link-box ul li {
  display: block;
}

See image here

Answer

Pure CSS way.

Click on Button to Show and ANYWHERE to DISMISS.

body {
  padding: 30px;
  display: inline-block;
}

button.toggle {
    border: 3px solid #000000;
    background: #fff;
    padding: 7px 15px;
    margin-right: 10px;
}

#link-box {
  width: 150px;
  height: 200px;
  display: none;
  float: right;
  border: 3px solid #000000;
}

.toggle:focus~#link-box {
 display: block;
}

#link-box > ul > li {
 list-style: none;
 padding: 10px;
}

#link-box > ul > li > a {
 text-decoration: none;
 color: #000000;
}

<button class="toggle">Button</button>
  <div id="link-box">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>