CSS列表样式下拉菜单定位

Question

---

我的问题是我不知道如何将下拉儿童放在他们的父菜单下。我尝试了所有我能想到的东西。 我不知道如何做这项工作。有什么想法吗？

以下是jsfiddle：http://jsfiddle.net/ppltr/f9hmyokw/embedded/result/ 这是撒旦：

.navi_l1 {
    list-style: none;
    padding: 0;}

    .navi_i1 {
        display: inline-block;}

        .navi_i1:hover ul {
            display: block;}

        .navi_i1:hover ul a {
            color: #fff!important;
        }

    .navi_l2 {
        margin-top: 15px;
        list-style: none;
        position: absolute;
        display: none;
        padding: 10px;
        background: #333;}
    .navi_l2 a:hover {
        opacity: 0.9;
    }

        .navi_l2:after {
            bottom: 100%;
            left: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-bottom-color: #333;
            border-width: 7px;
            margin-left: -7px;}

正如您所看到的，我无法使其发挥作用。这就是我现在的感受：http://2.bp.blogspot.com/-41v6n3Vaf5s/UeRN_XJ0keI/AAAAAAAAN2Y/YxIHhddGiaw/s1600/css.gif

帮助将不胜感激<3

Answer 1

我想出了这个解决方案。

Try this way in this jsfiddle！

看起来像：