Drop-down displays before event

Longtime lurker, first time question asker. I have a weird event here...

I have a navigation bar at the top of my website with a few items having a drop-down. The drop-down will automatically display when the mouse is in the area where the drop-down would display. (See the image below). The red-arrow represents where my mouse is when the drop-down triggers. example

I have feeling this is related to the z-index, but different combinations of z-index for the main content, and the sub-menu does not work. If I change the z-index to '-1' it will no longer display until you hover over 'Info', however it hides it behind the main content and makes the links unclickable.

Edit to include all CSS and HTML for menu. Thanks!

#header {
  width: 970px;
  height: 26px;
  margin: 0 auto;
  margin-top: 25px;
  border-bottom-width: thin;
  border-top-width: thin;
  border-left-width: thin;
  border-right-width: thin;
  border-style: solid;
  border-color: #444;
}

.clearfix: after {
  display: block;
  clear: both;
}

.menu-wrap {
  z-index: 1;
  margin: -13px 0px;
  float: right;
}

.menu li {
  margin: 0px;
  list-style: none;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
}

.menu a {
  text-decoration: none;
  color: #2e2728;
}

.menu>ul>li {
  float: left;
  display: block;
  font-size: 13px;
}

.menu>ul>li>a {
  padding: 3px 10px;
}

.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
  background: #2e2728;
  height: 15px;
  color: #fff;
}

.menu li:after {
  content: '|';
  color: #2e2728;
  display: inline-block;
}

.menu li:last-child:after {
  content: none;
}

.menu li:hover .sub-menu {
  opacity: 1;
}

.sub-menu {
  padding: 5px 0px;
  margin-top: 3px;
  position: absolute;
  z-index: 0;
  opacity: 0;
  background: #2e2728;
}

.sub-menu li {
  display: block;
  font-size: 13px;
}

.sub-menu li a {
  display: block;
  padding: 0px 10px;
  color: #fff;
}

.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #3e3436;
}

<div id="header">
  <div id="socialmedia">
    other stuff
  </div>

  <div class="menu-wrap">
    <nav class="menu">
      <ul class="clearfix">
        <li><a href="http://www.jon-stone.com/">Home</a></li>
        <li><a href="/urbanexplorations/">Urban Explorations</a></li>
        <li><a href="/galleries/">Galleries</a></li>
        <li><a href="#">Photography&#9662;</a>
          <ul class="sub-menu">
            <li><a href="http://www.jon-stone.com/info/fineart.php">Fine&nbsp;Art&nbsp;Purchasing</a></li>
            <li><a href="http://www.jon-stone.com/weddings/">Weddings</a></li>
            <li><a href="http://www.jon-stone.com/realestate/">Real Estate</a></li>
          </ul>
        </li>
        <li><a href="http://www.jon-stone.com/videography">Videography</a></li>
        <li><a href="">Info&#9662;</a>
          <ul class="sub-menu">
            <li><a href="http://www.jon-stone.com/info/statementandbio.php">Artist&nbsp;Statement&nbsp;&amp;&nbsp;Bio</a></li>
            <li><a href="http://www.jon-stone.com/info/awardsandpublications.php">Awards&nbsp;&amp;&nbsp;Publications</a></li>
            <li><a href="http://www.jon-stone.com/info/events.php">Events</a></li>
          </ul>
        </li>
        <li><a href="http://www.jon-stone.com/contact/">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

Solution

The problem seems to be in the way the submenu is hidden. Since its opacity is set at 0, the user can still hover the item as if it was there. You should instead look for a solution using display: none. With this, even if the user hovers the usually position of the hidden item, it will not be considered as hovered in the CSS condition.