Can't get submenu to pop up - html

Question

I'm trying to figure out how to get the .sub_menu to display when hovering over the main menu.
I know you hide the .sub_menu but how do you code when hovering over <li> to show sub menu <ul>? You would have to target hover for the first <li> but then change the display: none to however you want the sub menu to look like right?
I can't figure out how to do it.
#navagation{
float:left;
width:70%;
height:100%;border: 1px solid green;
margin:0;
padding:0;
}
#btmenu{
position:relative;
width:100%;
list-style: none;
margin:0;
padding:0;
border: 1px solid blue;
height:62px;text-align:center;
}
ul#btmenu li{
padding:0;
margin:0;
display: inline;
height:62px;
width:200px;
}
#btmenu li > a{ height:62px;
line-height:62px;
margin-left:1%;
margin-right:1%;
border: 1px solid green;
text-align:center;
display:inline-block;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:#000;
padding-left:1%;
padding-right:1%;
text-transform:uppercase;
vertical-align: middle;
}
#btmenu > li > a:hover{
background-color:#000;
color:#FFF;
}
.sub_menu{
display:none;
position:absolute;
width:680px;
background-color:#666;
border: 1px solid red;
list-style: none;
margin:0;
padding:0;
}
#btmenu .sub_menu li{
}
.sub_menu li a{display:inline-block;
background-color:#F00;
height:100px;
width:100px;margin:10px;
text-decoration:none;
color:#FFF;
}
<div id="navagation">
<ul id="btmenu">
<li class="top_quote"><a href="services">services
<ul class="sub_menu">
<li class="auto body repair">1</li>
<li class="rental & loaner">2</li>
<li class="hail damage repair">3</li>
<li class="towing">4</li>
<li class="glass repair">5</li>
</ul></a></li>
<li class="top_quote">locations</li>
<li class="top_quote">partners</li>
<li class="top_quote">our work</li>
<li class="top_quote">contact</li>
</ul>
</div><!--navagation-->

Answer 1

You need to add this line to make the sub menu appears when you hover a li :
#btmenu li:hover ul {display: block}
See it here

Answer 2

You shouldn't have the submenu inside the a tag (this can cause problems with the a tags inside the submenu)
If you put the submenu just after the a tag (as a sibling) then you can act on the li:hover
something like:
#btmenu > li:hover .sub_menu{
display: block;
}
working example with your snippet:
#navagation{
float:left;
width:70%;
height:100%;border: 1px solid green;
margin:0;
padding:0;
}
#btmenu{
position:relative;
width:100%;
list-style: none;
margin:0;
padding:0;
border: 1px solid blue;
height:62px;text-align:center;
}
ul#btmenu li{
padding:0;
margin:0;
display: inline;
height:62px;
width:200px;
}
#btmenu li > a{ height:62px;
line-height:62px;
margin-left:1%;
margin-right:1%;
border: 1px solid green;
text-align:center;
display:inline-block;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:#000;
padding-left:1%;
padding-right:1%;
text-transform:uppercase;
vertical-align: middle;
}
#btmenu > li > a:hover{
background-color:#000;
color:#FFF;
}
.sub_menu{
display:none;
position:absolute;
width:680px;
background-color:#666;
border: 1px solid red;
list-style: none;
margin:0;
padding:0;
}
#btmenu .sub_menu li{
}
.sub_menu li a{display:inline-block;
background-color:#F00;
height:100px;
width:100px;margin:10px;
text-decoration:none;
color:#FFF;
}
#btmenu > li:hover .sub_menu{
display: block;
}
<div id="navagation">
<ul id="btmenu">
<li class="top_quote">
services
<ul class="sub_menu">
<li class="auto body repair">1</li>
<li class="rental & loaner">2</li>
<li class="hail damage repair">3</li>
<li class="towing">4</li>
<li class="glass repair">5</li>
</ul>
</li>
<li class="top_quote">locations</li>
<li class="top_quote">partners</li>
<li class="top_quote">our work</li>
<li class="top_quote">contact</li>
</ul>
</div><!--navagation-->