CSS：使下拉子菜单出现以下父(CSS: make dropdown submenu appear

我有关于子菜单中有两个问题。我使用Twitter的引导3，该版本不支持子菜单，所以我找了一张CSS代码，这使得它可以使用。

但现在我跑了两个问题：

1）。子菜单中的定位。子元素是不是父元素。他们有一个固定的位置。我已经做了很多修改代码，但没有运气...

2）。第二个问题是，有时是不可能的重点子菜单。这个例子可以在英语版的演示模板下的“联系人”中可以看出： http://www.01kuzma.tk/en/第一个问题可以在这里看到： http://www.01kuzma.tk/ru/但是俄罗斯版的演示模板。我使用的样式子菜单，其中的代码是：

.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;
}

命名为style0.css主css文件预先感谢您！

我做了这个quiclky，可能是它可以帮助你：

http://jsfiddle.net/RUn6S/1/

HTML：

<div class="menu">
    <ul class="list">
        <li class="item"><a href="#">Contains sub menu</a>
            <ul class="list">
                <li class="item"><a href="">Sub item</a></li>
                <li class="item"><a href="">Sub item</a></li>
            </ul>
        </li>
        <li class="item"><a href="#">Contains sub menu</a>
            <ul class="list">
                <li><a href="">Sub item</a></li>
                <li class="item">
                    <a href="">Sub item</a>
                    <ul class="list">
                        <li class="item"><a href="">Sub item</a></li>
                        <li class="item"><a href="">Sub item</a></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;    
}