Trouble with a sub menu in my WordPress menu - php

Question

I'm creating my first WordPress theme. It's a very simple one for a friend's website, who is a music producer. I'm creating the navigation menu. One of the items on the menu is listen. It's not an actual link. You hover over it and a submenu should appear. So I made Listen a custom link.
The problem is that the submenu doesn't appear. The Submenu has its own class. But I don't think WordPress is reading the CSS
Here is the CSS:
ul.sub-menu {
display: none;
position: absolute;
padding: 0px;
margin-left: -20px;
}
ul.sub-menu li {
display: block;
text-align: left;
background-color: grey;
}
ul.sub-menu li:hover {
background-color: #dae0e6;
}
ul.main_nav li:hover ul.sub-menu {
display: block;
}
Here is the HTML and php code in the header.php:
<nav>
<?php
$defaults = array(
'container' => false,
'theme_location' => 'primary-menu',
'menu_class' => 'main_nav'
);
wp_nav_menu( $defaults );
?>
<!--
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
-->
</nav>

Answer 1

Here is my approach:
I changed css so its shows menu sub menu with CSS.
JsFiddle Demo
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
<nav>
<ul class="main_nav">
<li>
Home
</li>
<li>
Bio
</li>
<li>
<a>Listen</a>
<ul class="sub-menu">
<li>Originals</li>
<li>TV/Film</li>
</ul>
</li>
<li>Credits</li>
<li>Contact</li>
</ul>
</nav>

Answer 2

In example above your menu is commented out. Also parent of ul.sub-menu should be positioned relative.

Answer 3

since you are new ... I think you should start by get general idea about the sub menu and style them in WordPress .
this Tut will help you
http://wproots.com/how-to-style-wordpress-menus-dropdowns/
also I will suggest other option for you .
start form other theme like wordpress deafult theme and edit it
start form starter theme like http://bootstrapwp.rachelbaker.me/
start from template
its hard to build theme from scratch if you are new ... step by step

Answer 4

please assign width to ul like
ul.sub-menu {
display: none;
}
and plaece
ul.main_nav li:hover ul.sub-menu {
display: block;
position: absolute;
padding: 0px;
margin-left: -20px;
top:0;
left:0;
width:800px;
}
just after it