Drop Down Menu only dropping down on 1st tab and not parent tab

Hi Everyone,

I have searched for this specific topic, there was one in the past but never got resolved.

Here is the link to my customized theme website:
https://70.40.220.105/~iamanedu/

When you hover over each tab in the navigation, it is floating to the left, I would love for it to hover over it’s tab.

Here is my code:
html in my header.php:

<div id="main-nav">
    <a href="home.html"><h1>I <span class="title">AM</span> An Educator</h2></a>

    <div id="nav-items">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' => 'div','container_id' => 'main-nav', 'items-wrap' => '<ul id="nav-items"</ul>', ) ); ?>    </div>
</div>

and then the css:

#nav-items {
  float: left;
	border-top: solid thin #684685;
	border-bottom: solid thin #684685;
  width: 100%;
}

#nav-items ul li{
	list-style-type: none;
  display: inline;
  padding: 5%;
	position: relative;
}

#main-nav {
  text-align: center;
  float:right;

}

#nav-items > li {
font-family:'Oswald', sans-serif;
font-weight:400;
  font-size: 1.125em;
  display: inline-block;
  list-style-type: none;
  position: relative;
  width:16%;
  float:left;
  line-height:50px;
  text-align:center;
}

#nav-items li.wide {
width:20%;
}

#nav-items > li a {
  text-decoration: none;
}

#nav-items > li a.current {
  background: #fff;
  color: #000;
}

#nav-items ul li:hover a {
  background: #fff;
  color: #000;
}

#nav-items > li a {
  display: block;
  color: #000;
}

#nav-items > li:hover a {
  background: #fff;
  color: #000;
}

#nav-items ul.sub-menu {
  text-align: left;
  position: absolute;
  display: none;
  background-color: #fff;
  z-index: 20;
  width:8em;
  text-indent:1em;
}

#nav-items ul.sub-menu li {

  display: block;
  float: none;
  font-size: 1em;
  position: relative;
}

#nav-items ul.sub-menu li a {

}

#nav-items li:hover > ul.sub-menu{

  display: block;

}

Any help would be appreciated! thanks