html - 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

我为您提出了这个解决方案。

在此尝试这种方式 jsfiddle !

看起来像: