title: CSS Vertical menu with horizontal submenu
body: <p>I know this is a quite frequent question, but I've been having troubles finding the exact answer to this problem.</p>
  
  <p>The menu I want is consists of dots. These dots are vertical. The text for these dots will be added later, so don't mind that now. I want a submenu to some of these dots. This submenu should be horizontal. Best illustrated by the below. </p>
  
  <pre><code>x
  x x x 
  x
  x
  x
  </code></pre>
  
  <p>But for now it looks like this:</p>
  
  <pre><code>x
  x
  xx
  x
  x
  </code></pre>
  
  <p>So the sub menu is one row below where it should on top of another item. Hope this is clear</p>
  
  <p>The html I have is:</p>
  
  <pre><code>         &lt;ul id="mainmenu"&gt;
           &lt;li id="liHome" class="active"&gt;
               &lt;a href="#item-x1y1" class="panel" rel="none" id="Home"&gt;Home&lt;/a&gt;
           &lt;/li&gt;
           &lt;li id="liServices" class=" "&gt;
               &lt;a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services"&gt;Services&lt;/a&gt;
               &lt;ul style="" id="SubMenuY2" class="submenu"&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Sub-item 1&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Sub-item 2&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li id="liEnvironment"&gt;
               &lt;a href="#item-x1y3" class="panel" rel="none" id="Environment"&gt;Environment&lt;/a&gt;
           &lt;/li&gt;
           &lt;li id="liCareer"&gt;
               &lt;a href="#item-x1y4" class="panel" rel="none" id="Career"&gt;Career&lt;/a&gt;
           &lt;/li&gt;
           &lt;li id="liContact"&gt;
               &lt;a href="#item-x1y5" class="panel" rel="none" id="Contact"&gt;Contact&lt;/a&gt;
           &lt;/li&gt;
       &lt;/ul
  </code></pre>
  
  <p>And the css is:</p>
  
  <pre><code>#mainmenu {
    position: fixed;
    left: 20px;
    top: 50%;
    z-index: 999999;
    margin-top:-200px;
  }
  
    #mainmenu li {
      height: 40px;
      position: relative;
    }
  
    #mainmenu a {
      display: block;
      width: 40px;
      height: 40px;
      background: url(Images/dotnav.png) 0 100% no-repeat;
   text-indent: -10000px;
      overflow: hidden;
    }
  
  
    #mainmenu a:hover,
    #mainmenu li.active a {
      background-position: 0 0;
  
    }
  .submenu
  {
      list-style-type: none; 
      position:relative;
      float:left;
  }
  .submenu li
  {
      display: inline; 
      float:left; 
      position:relative
  }
  </code></pre>