Wordpress Nav - Horizontal Nav with dropdown - php

Question

I'm trying to create a horizontal nav with a drop down in wordpress.
This is the code I'm tryin to make using the wordpress nav:
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
What I have for the PHP is this:
<?php $defaults = array(
'container_class' => 'dropdown',
'container_id' => '',
'container' => '',
'menu_class' => 'dropbtn',
'menu_id' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
); ?>
<?php wp_nav_menu( $defaults ); ?>
What it puts out is this:
<ul class="dropbtn" id="menu-desktop-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-311" id="menu-item-311">Home</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-266" id="menu-item-266">Name
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-276" id="menu-item-276">Name</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274" id="menu-item-274">Name</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275" id="menu-item-275">Name</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271" id="menu-item-271">Name</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-270" id="menu-item-270">Name
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-277" id="menu-item-277">Name</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272" id="menu-item-272">Name</li>
</ul>
</li>
</ul>
It's not getting me what I want. I've tried several other things, but I'm really confused on what I need to change to make this work. Can someone help me?

Answer 1

here is simple dropdown menu on hover
.dropbtn > li {
position: relative;
display: block;
height: 40px;
padding: 0 20px;
float: left;
}
.dropbtn .sub-menu {
position: absolute;
top: 100%;
left: 50%;
display: none;
width: 150px;
margin-left: -75px;
padding: 10px;
background-color: #f0f0f0;
}
.dropbtn .sub-menu li {
display: block;
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px dotted #d0d0d0;
}
.dropbtn > li:hover .sub-menu {
display: block;
}
<ul class="dropbtn" id="menu-desktop-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-311" id="menu-item-311">Home</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-266" id="menu-item-266">Name
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-276" id="menu-item-276">Name</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274" id="menu-item-274">Name</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275" id="menu-item-275">Name</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271" id="menu-item-271">Name</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-270" id="menu-item-270">Name
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-277" id="menu-item-277">Name</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272" id="menu-item-272">Name</li>
</ul>
</li>
</ul>