Drop Down Menu in pure CSS

fiddle.css

*{box-sizing: border-box;}
nav{
  width: 20%;
  min-width: 18em;
  margin: 0 auto;
}
h1{
  position: relative;
  display: inline-block;
  font: 2em/1em sans-serif;
  cursor: pointer;
  user-select: none;
  height: 2.1em;
}
h1:after{
  content:"";
  border: 10px solid transparent;
  border-top-color: #ccc;
  position: absolute;
  right: -30px;
  top: 15px;
}
h1:hover + ul{
  display: block;
}
ul{
 background: #eee;
 border: 1px solid #ddd;
 border-radius: 1%;
 display: none;
 position: relative;
 top: -1.5em;
}
ul:hover{
  display: block;
}
li{
 padding: 3% 5%;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #ddd;
 cursor: pointer;
}
li:first-child{border-top: none;}
li:last-child{border-bottom: none;}
li:hover{background: linear-gradient(#eee,#ddd);}

fiddle.html

<nav>
<h1>Drop Down Menu</h1>
<ul>
  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>
</ul>
</nav>