title: drop down menu 3 level (horizontal followed by 2 verticals)
body: <p>I have a menu bar. The menu bar is horizontal. The sub menu is then extended vertically upon hovering. The items in this sub menu includes Manage subjects, Manual Crawl, Crawl Interval and Archive List. When the mouse is hover to Manage subjects, it should prompt another dropdown list at the right side of it to product a sub sub menu. However, I can make this sub sub menu to appear on the right. its over lapping my sub menu. as i am really new to CSS, i definitely need help in this. i have a feeling i am not even editing 
   #menu ul li ul li ul, #menu ul li ul li:hover ul ,#menu ul li ul li:hover ul li and #menu ul li ul li ul li a:hover. thank you.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Executive Summary&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" &gt; Visual Analytics&lt;/a&gt;&lt;/li&gt; 
          &lt;li&gt;&lt;a href="#" &gt;Settings&lt;/a&gt;
              &lt;ul&gt;                                      
                  &lt;li&gt;&lt;a href="#" &gt;Manage Subject&lt;/a&gt;&lt;/li&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Add Subject&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Edit Subject&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Delete Subject&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Export Subject&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Manual Crawl&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Crawl Interval&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Archive List&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> #menu {
      position: relative;
      float: left;
      width: 1200px;
      height: 35px;
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 13px;
      padding: 0;    
      background-color:#000;
      text-align: center;
      z-index:1;
  }
  
  #menu ul {
      position: relative;
      list-style: none;
      display: inline-block;
      margin: 0;
      padding: 0;
  }
  
  #menu ul li {
      position: relative;
      float: left;
      height: 100%;
      padding: 0;
      line-height: 35px; 
  }
  
  #menu ul li a {
      position: relative;
      height: 100%; 
      width: auto;
      float: left;
      text-decoration: none;
       padding: 0px 10px 0px 10px;   
      margin: 0 3px;
      color: #fff;
      text-align: center;
  }
  
  #menu ul li ul {
     display: none;
     width: 150px; /* Width to help Opera out */
     background-color: rgba(0,0,0,0.5);
  }
  
  #menu ul li:hover ul {
      display:block;
     position: absolute;
     top: 35px;
     left: 0;
     margin: 0;
     padding: 0;
     z-index: 1;
     width:150px; 
  }
  
  #menu li li a{
      height: 35px; 
      width: 150px;
      float: left;
      text-decoration: none;
      padding: 0px; 
      margin: 0 0px;
      color: #fff;
      text-align: center;
  }
  
  #menu ul li ul li a:hover{
     background: rgba(255,255,255,0.5);
     width:150px;
     float:left;
  }
  #menu ul li ul li ul{ display:none; position:absolute;background-color:rgba(28,28,240,0.5);}
  #menu ul li ul li:hover ul { display:block; position:absolute; top:0px;background-color:#fff;}
  #menu ul li ul li:hover ul li { list-style:none; float:none; margin-left:1px; padding:0px; position:relative;background-color:#fff;}
  #menu ul li ul li ul li a:hover{
     background-color: rgba(28,28,240,0.5);
     width:150px;
     float:left;
  }​
  </code></pre>