Navigation Bar Dropdown problems - html

Question

I'm building a navigation bar and I want
all the items on the same row [not sure why a 2nd row is created]
the dropdown items from 'Samples' button to display vertically instead of horizontally
JSFiddle: https://jsfiddle.net/RadiantSilvergun/xsbnjo5g/5/
I've used <div> elements instead of <ul> and <li> elements, is that a problem?
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.dropbutton {
background-color: #333;
color: white;
padding: 14px 16px;
font-size: 16px;
font: 1em times;
border: none;
cursor: pointer;
}
.dropdown {
position: static;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content>a {
position: relative;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content>a:hover {
background-color: #f1f1f1;
position: relative;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbutton {
background-color: darkgrey;
}
.button {
background-color: black;
color: white;
border-radius: 5px;
;
padding: 15px 15px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
<div class="topnav">
<div>Contact Me</div>
<div class="dropdown">
<button class="dropbutton">Samples</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div>Recommendations</div>
<div>Video Editing</div>
<div>Photoshop</div>
<div><a style="float: right" href="#">About</a></div>
</div>