title: CSS styling dropdown/right submenus
body: <p>I am trying to make a dropdown menu with HTML/CSS. Actually, it is dropright menu that is the issue. Hovering over navigation bar items triggers dropdown menu when on certain item, and then hovering above items in this submenu is suppose to show another submenu, on the right side from the item(dropright menu). And it should continue showing item submenus as i hover over items that have subitems.</p>
  
  <p>This is (wrong) code for showing dropright menu:</p>
  
  <pre><code>#droprightMenu {
      display: none; /* hide the sub menus */
      background: #5f6975; 
      border-radius: 0px; 
      padding: 0;
      position: absolute; 
      top: 100%;
  }
  
  #droprightMenu li {
      float: none; 
      border-top: 1px solid #6b727c;
      border-bottom: 1px solid #575f6a;
      position: relative;
  
  }
  
  #droprightMenu li a {
      color: #fff;
  }   
  
  #droprightMenu li a:hover {
      background: #4b545f;
  }
  </code></pre>
  
  <p>Here is what i have now: 
  <a href="http://jsfiddle.net/vvozar/yL7su/" rel="nofollow">http://jsfiddle.net/vvozar/yL7su/</a></p>
  
  <p>Now, as you can see when hovering over item "Categories" and then over its subitem "All",i am getting dropdown menu right under, which i dont want. I would like that menu to show on the right side of the item. I would like this to be styled with "id", because i will be dynamically (in a loop) creating this submenus (unordered html lists), and i don't know how deep it will go.
  Appreciate any help.</p>