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

主要的css文件名为style0.css 提前谢谢！

Answer 1

我已经做了这个问题，可能它可以帮助你：

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

CSS：make dropdown子菜单显示在parent下方

1 个答案: