title: CSS vertical navigation menu with horizontal submenus and semitransparent band
body: <p>I can't get my submenu to stay/appear on the same line as its parent. I want it to be located within the transparent band that appears via mouse-over. I'm new to this, any advice is greatly appreciated. </p>
  
  <p>Jsfiddle: <a href="http://jsfiddle.net/kn4Jx/" rel="nofollow">http://jsfiddle.net/kn4Jx/</a></p>
  
  <p>Exhibition should have a submenu with two links Current and Previous.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div&gt;
    &lt;ul id="mainmenu"&gt;
      &lt;li id="liHome"&gt;
        &lt;a href="#item-x1y1" class="maintextcolour" rel="none" id="Home"&gt;INFO&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="liServices" class="active"&gt;
        &lt;a href="#item-x1y2" class="maintextcolour" rel="SubMenuY2"             id="Services"&gt;EXHIBITIONS&lt;/a&gt;
      &lt;ul id="SubMenuY2" class="submenu"&gt;
       &lt;li&gt;&lt;a href="#" class="maintextcolour"&gt;CURRENT&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#" class="maintextcolour"&gt;PREVIOUS&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt; 
      &lt;/li&gt;
      &lt;li id="liEnvironment"&gt;
        &lt;a href="#item-x1y3" class="maintextcolour" rel="none" id="Environment"&gt;CV&lt;/a&gt;
      &lt;/li&gt; 
      &lt;li id="liCareer"&gt;
        &lt;a href="#item-x1y4" class="maintextcolour" rel="none" id="Career"&gt;NEWS&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="liContact"&gt;
        &lt;a href="#item-x1y5" class="maintextcolour" rel="none" id="Contact"&gt;MORE&lt;/a&gt;
      &lt;/li&gt;
      &lt;/ul
  &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>  body 
    {
     background-color:#06F;background-size: 100%;
     background-repeat:no-repeat;
    }
  
    #mainmenu
    {
     margin: 0;
     padding: 0; 
     list-style-type: none;
     position:relative;
     }
  
     #mainmenu li 
     {
      clear: left;
      position:relative;
     }
  
     #mainmenu a 
     {
      display: block;
      overflow: hidden;
      float: left;
      width:100%;
      position:relative;   
     }
  
      #mainmenu a:hover
     {   
      background-position: 0 0;   
      background-color:clear;   
      background-color:rgba(255,255,255,0.5);   
      width:100%;
     }
  
     #mainmenu li.active a 
     {   
      background-position: 0 0;   
      background-color:clear;
      width:100%;
     }
  
     .submenu 
     {   
      list-style-type: none;    
      float: left;   display: none;  
      position:absolute;   
      right:900px;   
      top:0px;
     }
  
     #mainmenu li a:hover+.submenu, .submenu:hover 
     {  
      display:inline-block;
     } 
  
    .submenu li 
    {
     display: inline;    
     clear: none !important;
    }
  
    .submenu li a 
    {   
     float: right;   
     margin-left: 10px;
    }
  
    .maintextcolour 
    {     
     font-family: Arial, Helvetica, sans-serif;
     font-size: 24px;     
     color:#FFF;  
     text-decoration: none; 
    }
  
    .maintextcolour:hover 
    {     
     font-family: Arial, Helvetica, sans-serif;
     font-size: 24px;     
     color:#0FF;  
     text-decoration: none; 
    }
  </code></pre>