wordpress wp nav menu() do not have style - php

Question

I can't style my WordPress function correctly, and the sub-menu and menu are displayed together and on top of each other. I want to separate these two, what should I do? My codes are as follows:
i do not know about html vs css code please help me or if you have any details about nav menu in wordpress template so please Guide me
<?php wp_nav_menu( array( 'theme_location' => 'primary_menu', 'container' =>'', 'menu_class' =>'meno' ) ); ?>
<style>
.meno{
list-style-type: none;
padding-right:20px;
width:800px;
}
.meno li{
display: inline-block;
margin-left:50px;
border-radius: 5px 5px 5px 5px;
background-color: #fff;
padding:-3px ;
}
.meno li a {
display: block;
padding: 0;
text-decoration: none;
/* this is the width of the menu items */
line-height: 35px;
/* this is the hieght of the menu items */
/* list item font color */
text-align: center;
}
.meno li li a {
font-size: 80%;
width: 200px;
transition: all 0.2s;
}
.meno li:hover {
background: #e0d5d5;
border-radius: 5px 5px 5px 5px;
transition: all 0.4s;
box-shadow: 0 0.125rem 0.125rem -0.125rem rgba(31, 27, 45, 0.08), 0 0.25rem 0.75rem rgba(31, 27, 45, 0.08);
}
.meno ul {
padding: 0;
left: 0;
/* hides sublists */
width: 100px;
height: 100px;
transition: all 0.4s;
position: absolute;
display: none;
}
.meno li:hover ul ul {
display: none;
background: #493131;
transition: all 0.4s;
}
.meno li:hover ul {
position: relative;
display:block;
width: 200px;
height: auto;
}
/* shows sublist on hover */
.meno li li:hover ul {
display: block;
/* shows sub-sublist on hover */
margin-left: 200px;
/* this should be the same width as the parent list item */
margin-top: -35px;
/* aligns top of sub menu with top of list item */
background: #8a7c7c;
}
</style>