title: CSS: make dropdown submenu appear below parent
body: <p>I'm having two problems regarding sub-menu.
  I'm using Twitter Bootstrap 3. This version doesn't support the sub-menus so I've found a piece of CSS code which makes it possible to use.</p>
  
  <p>But now I'm running two problems:</p>
  
  <p>1). The sub-menu positioning. The child elements aren't under the parent element. They have a fixed position. I have made many code modifications but had no luck...</p>
  
  <p>2). Second problem is that sometimes it is impossible to focus on sub-menu. This example could be seen in English version of demo template under 'contacts': <a href="http://www.01kuzma.tk/en/" rel="nofollow">http://www.01kuzma.tk/en/</a>
  The first problem could be seen here: <a href="http://www.01kuzma.tk/ru/" rel="nofollow">http://www.01kuzma.tk/ru/</a> but it is Russian version of demo template.
  The code which I'm using to style the sub-menu is:</p>
  
  <pre><code>.custom div.moduletable ul.nav, html body div#page div#midlle.row div.col-md-6   div#component nav.navbar div.moduletable ul.nav{
  display: block; position: static; margin-bottom: 5px; 
  }
  
  .dropdown-submenu{
      position:relative;
  }
  
  .dropdown-submenu &gt; .dropdown-menu
  {
     top:100%;
     left:80%;
     margin-top:-6px;
     margin-left:-1px;
     -webkit-border-radius:0 6px 6px 6px;
     -moz-border-radius:0 6px 6px 6px;
     border-radius:0 6px 6px 6px;
  }
  
  .dropdown-submenu:hover &gt; .dropdown-menu{
     display:block;
  }
  
  .dropdown-submenu &gt; a:after{
     display:block;
     content:" ";
     float:right;
     width:0;
     height:0;
     border-color:transparent;
     border-style:solid;
     border-width:5px 5px 0;
     border-top-color:#cccccc;
     margin-top:5px;
     margin-right:-10px;
  }
  
  .dropdown-submenu:hover &gt; a:after{
  border-top-color:#ffffff;
  }
  </code></pre>
  
  <p>The main css file named as style0.css
  Thank you in advance!</p>