Sub menu item

Als ik een submenu probeer toe tevoegen bij mijn custom menu bar dan komt hij er direct onder en dan word de hele balk verplaatst.

Welke code moet ik toevoegen om deze on hover te zien.

Code van mijn css:

/* nav menu's */

.site-nav ul{
	margin:0;
	padding:18px 10px;
	background-color: black;  

}

.site-nav ul:before .site-nav ul:after {content:""; display:table;}
.site-nav ul:after{clear:both;}

.site-nav ul li{
	list-style:none;
	display:inline;

}

/* Site Header Menu */

.site-header nav ul li a:link,
.site-header nav ul li a:visited{

	display:inline;
	line-height: 20px;
	padding:10px 18px;
	text-decoration: none;
	color:white;

}

.site-header nav ul li a:hover{
	background-color: white;
	color:black;

}

.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited{
	background-color: white;
	color:black;
}

Header.php

<nav class="site-nav">
				<?php
				$args =array(
					'theme_location' => 'primary'
					);
					?>
			<?php wp_nav_menu($args);?>
	</nav>

Functions.php

register_nav_menus(array(
'primary' => __('Primary Menu')
	));

Kan iemand mij uitleggen wat ik toe moet voegen ?:D

Dit gebeurd er:

Home
Winkel
Blog FaQ Locatie Contact

Dit wil ik:

Home Blog Faq Locatie Contact
Winkel

Winkel is dan een sub van Home aleen ik krijg nu dat winkel er gewoon onder gedisplayt word 🙁
Alvast hartelijk bedankt.