CSS: make dropdown submenu appear below parent - html

Question

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.
But now I'm running two problems:
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...
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': http://www.01kuzma.tk/en/
The first problem could be seen here: http://www.01kuzma.tk/ru/ but it is Russian version of demo template.
The code which I'm using to style the sub-menu is:
.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 > .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 > .dropdown-menu{
display:block;
}
.dropdown-submenu > 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 > a:after{
border-top-color:#ffffff;
}
The main css file named as style0.css
Thank you in advance!

Answer 1

I have made this quiclky, may be it can help you :
http://jsfiddle.net/RUn6S/1/
HTML :
<div class="menu">
<ul class="list">
<li class="item">Contains sub menu
<ul class="list">
<li class="item">Sub item</li>
<li class="item">Sub item</li>
</ul>
</li>
<li class="item">Contains sub menu
<ul class="list">
<li>Sub item</li>
<li class="item">
Sub item
<ul class="list">
<li class="item">Sub item</li>
<li class="item">Sub item</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS :
.menu
{
height: 25px;
background-color: #111111;
}
.menu a
{
color : gray;
text-decoration : none;
}
.menu a:hover
{
color : white;
text-decoration : none;
}
.list
{
list-style-type : none;
padding:0;
}
.item
{
position : relative;
display : inline-block;
vertical-align : top;
width : 150px;
}
.item>.list
{
display : none;
background-color : #222222;
}
.item:hover>.list
{
display : block;
}