html - CSS:使下拉子菜单显示在父级下方

Question

我有两个关于子菜单的问题。 我正在使用 Twitter Bootstrap 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 文件 提前致谢!

Answer 1

我已经做了这个 quickky，也许它可以帮助你:

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