Question

我有一个引导菜单，当我将鼠标悬停在标题上时，它会加载一个列表，当我将鼠标悬停在其中一个菜单项上时，它会加载一个子菜单。

我想要的是子菜单中的第一行直接位于它所在的菜单项右侧。

所以在下面的示例中，当您将鼠标悬停在标题上时，会加载第一行并拖动，当您将鼠标悬停在第一行时，它会加载第一行a和b

我希望a上的第一行是正确的。此外，当您加载子菜单时，您无法再次将鼠标悬停在菜单上，它会折叠。

CSS

    body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
.ullevelone{
    display: inline-flex;
    list-style-type: none; 
}

.lilevelone{
    color: red;
    padding-right: 20px;
}
.ulleveltwo {
    display: none;          
    padding: 0px;
    list-style-type: none;      
}

.lilevelone:hover > .ulleveltwo{
    display: block;
}

.ullevelthree {
    display: none;    
    padding: 0px;
    list-style-type: none;
}

.lileveltwo:hover > .ullevelthree{
    display: block;
}

HTML

<ul class="ullevelone">
                <li class="lilevelone">
                    Header one
                    <ul class="ulleveltwo">
                        <li class="lileveltwo">
                            <a href="">Line one</a>
                            <ul class="ullevelthree">
                                <li class="lilevelthree"><a href="">Line one a </a></li>
                                <li class="lilevelthree"><a href="">Line two a</a></li>
                            </ul>
                        </li>
                        <li class="lileveltwo"><a href="">Line two</a></li>
                    </ul>
                </li>
                <li class="lilevelone">Header two</li>
                <li class="lilevelone">Header three</li>
            </ul>

js小提琴链接：http://jsfiddle.net/Lz847txg/

Answer 1

改变：

.ullevelone{
    display: inline-flex;
    list-style-type: none; 
    position: relative;
}

.ulleveltwo {
    display: none;          
    padding: 0px;
    list-style-type: none; 
    position: absolute;    

}

.ullevelthree {
    display: none;    
    padding-left: 5px;
    padding-top: 0px;
    padding-bottom: 0px;    
    list-style-type: none;   
    float: right;   
}



.lileveltwo:hover > .ullevelthree{
    display: inline-block;
}

似乎有效！

Answer 2

你可以这样做：

.ullevelthree {
display: none;    
padding: 0px;
list-style-type: none;
position:absolute;
left:20%;}

在引导程序中，子UL与父UL相邻

2 个答案: