title: Submenu Positioning
body: <p>(I HAVE SINCE UPDATED THE CODE TO REFLECT THE WORKING CODE. THE CODE BELOW WORKS NOW)</p>
  
  <p>Ive been working on trying to position a submenu. For the record, I have done my homework over the last week trying to make this work but I think I am messing up somewhere with my parent/child relationships.</p>
  
  <p>What I am trying to do is place a menu in a column on a page, then, when hovering, have a submenu appear to its right hand side. THE PROBLEM is that my menu appears but when I resize the page, it the submenu jumps all over the place. It looks like my relative and absolute positions are the problems but I cant see where</p>
  
  <p>Here is my CSS code:</p>
  
  <pre><code>#col1
  {
  background-color:#000033;
  width:15%;
  height:100%;
  float:left;
  color:#FFF000;
  font-family: bold;
  font-size: 100%;
  }
  
  
  ul.nav li 
  {
  position:relative;
  float:left;
  width:100%;
  }
  
  ul.nav a
  {
  display: block;
  background-color:#B2B2D9;
  margin-right:3%;
  margin-bottom:1%;
  margin-left:1%;
  text-decoration:none;
  border-top-color:#FFFFFF;
  border-right-color:#E6E6E6;
  border-bottom-color:#FFFFFF;
  border-left-color:#E6E6E6;
  border-top-width: 3%;
  border-right-width: 3%;
  border-bottom-width: 3%;
  border-left-width: 3%;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  padding: 2%;
  }
  
  
  ul.nav
  {
  position:relative;
  list-style-type: none;
  padding-left:0px;
  line-height:1.5em;
  }
  
  ul.nav2 a
  {
  display: block;
  background-color:#000033;
  border:solid 3px black;
  padding:5%; 
  margin-right:0px;
  margin-bottom:0%;
  margin-left:0%;
  text-decoration:none;
  color:white;
  border-top-color:#FFFFFF;    
  border-right-color:#E6E6E6;
  border-bottom-color:#FFFFFF;
  border-left-color:#E6E6E6;
  }
  
  
  ul.nav2
  {
  position:absolute;
  top:0;
  left:100%;
  display:none;
  font-size:100%;
  list-style-type: none;
  width:8em;
  line-height:1.5em;
  float: none;
  clear: none;
  margin: 0px;
  }
  
  ul.nav2 li 
  {
  display:block;
  margin-left:-2.8em;
  width:100%;
  line-height:1.3em;
  }
  </code></pre>
  
  <p>Here is my HTML and JavaScript:</p>
  
  <pre><code>&lt;script&gt;
  
  $(document).ready(function () {
      $('.nav').hover(function (e) {
          $('.nav2').slideDown('normal');
      }, function () {
          $('.nav2').slideUp('normal');
      });
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
   &lt;body&gt;
  
  &lt;div id="banner"&gt;
  &lt;img src="images/banner.jpg" width="100%" alt="banner" /&gt;
  &lt;/div&gt;
  
  &lt;div id="wrapper"&gt;
  
  
  &lt;div id="col1"&gt;
  
  &lt;ul class="nav"&gt;
  &lt;li&gt;&lt;a href="http://www.ahome.com"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.ab.com"&gt;About&lt;/a&gt;&lt;/li&gt;
  
      &lt;ul class="nav2"&gt;
    &lt;li&gt;&lt;a href="http://www.albio.com"&gt;Bio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://www.acred.com"&gt;Credentials&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://www.aled.com"&gt;Education&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;li&gt;&lt;a href="http://www.anew.com"&gt;New Listings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.afeat.com"&gt;Featured Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.atow.com"&gt;Town Facts&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.acme.com"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;div id="main"&gt;
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see, my menu is the problem. Can someone get me pointed in the right direction?</p>