title: CSS Sub Menu shows up outside body
body: <p>I have tried to find an answer to my question, and while there are similar issues, nothing jumped out as me as a fix for my problem. </p>
  
  <p>I am adding a Sub menu using CSS and for some reason the horizontal sub menu will only show up outside of the body. You can see an example of what happens here <a href="http://jsfiddle.net/sxP94/22/" rel="nofollow">http://jsfiddle.net/sxP94/22/</a>. </p>
  
  <p>I need to get the sub menu to appear right under Portfolio on the menu. If anybody could help me figure out why this is happening, I would be ever so grateful. </p>
  
  <p>Here is the code:</p>
  
  <p>CSS</p>
  
  <pre><code>body {
  margin:0;
  padding:0;
  width:100%;
  color:#929292;
  font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
  }
  html, .main {
  padding:0;
  margin:0;
  } 
  .main {
  background:#f8f8f8;
  }
  
  a {
  color:#0087c7;
  text-decoration:underline;
  }
  .header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
  margin:0;
  padding:0;
  }
  .header {
  }
  .header_resize {
  margin:0 auto;
  padding:0;
  width:960px;
  }
  
  h1 a, h1 a:hover {
  color:#000;
  text-decoration:none;
  }
  h1 span {
  }
  
  .menu_nav {
  margin:0 auto;
  padding:70px 0 0;
  height:15px;
  float:right;
  }
  .menu_nav ul {
  list-style:none;
  padding:0 0 0 1px;
  height:15px;
  float:left;
  background:url(../images/menu_split.gif) no-repeat left center;
  }
  .menu_nav ul li:first-child {
  margin:0;
  }
  .menu_nav ul li {
  margin:0;
  padding:0 20px;
  float:left;
  background:url(../images/menu_split.gif) no-repeat right center;
  }
  .menu_nav ul li a {
  display:block;
  margin:0;
  padding:0;
  font-size:15px;
  line-height:18px;
  font-weight:bold;
  color:#c4c4c4;
  text-decoration:none;
  text-transform:uppercase;
  }
  .menu_nav ul li.active a, .menu_nav ul li a:hover {
  text-decoration:none;
  color:#000;
  }
  .menu_nav &gt; ul &gt; li &gt; ul {
  height:1000px;
  left:-99999px;
  overflow:visible;
  position:absolute;
  top:37px;
  width:115px;
  float: left;
  
  }
  .menu_nav &gt; ul &gt; li:hover ul {
  left:0;
  top:37px;
  }
  .menu_nav &gt; ul &gt; li &gt; ul &gt; li {
  background:none #343434;
  border:1px solid #4f4f4f;
  float:none;
  height:29px;
  margin:-1px 0 0;
  padding:0 12px;
  position:relative;
  width:auto;
  z-index:1000;
  }
  .menu_nav ul li ul li a {
  color:#ffffff!important;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  line-height:28px;
  text-transform:none;
  
  }
  .menu_nav ul li ul li.active a, .menu_nav ul li ul li a:hover {
  color:#fff!important;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="main"&gt;
  &lt;div class="header"&gt;
  &lt;div class="header_resize"&gt;
    &lt;div class="menu_nav"&gt;
      &lt;ul&gt;
        &lt;li class="active"&gt;&lt;a href="index.html"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about.html"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="services.html"&gt;&lt;span&gt;Services&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="portfolio.html"&gt;&lt;span&gt;Portfolio&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
          &lt;li&gt;&lt;a href="boudoir.html"&gt;Boudoir&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="babies.html"&gt;Babies&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="engagement.html"&gt;Engagement&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="wedding.html"&gt;Wedding&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="lifestyle.html"&gt;Lifestyle&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="family.html"&gt;Family&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="grad.html"&gt;Grads&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
        &lt;li&gt;&lt;a href="blog.html"&gt;&lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="contact.html"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Anytime I change any of the left numbers, the sub menu stops showing up completely. Doesn't even show up on the outside of the body when I hover over the menu. So I can't figure out how to move it around because anything I try makes it disappear completely. Thank you for taking the time to read this and thank you in advance for any help you are able to offer. </p>