Question

我尝试将此菜单集成到我的项目中，但它有两个问题。

当我有这个场景时，

- 我尝试将子菜单的宽度设置为自动，因为它将根据子菜单的长度。

我如何让这个工作？

CSS -

  .mega-wrapper {
            width: 100%;
            margin: 0 auto;
        }

        .mega-nav {
            position: relative;
            width: auto;
            height: 59px;
            background: #252428;
        }


            .mega-nav ul .mega-ul {
                display: block;
                margin: 0;
                padding: 0;
                list-style: 0;
            }

            .mega-nav .mega-ul li {
                position: relative;
                display: inline-block;
            }

                .mega-nav .mega-ul li a {
                    display: block;
                    font-size: 1em;
                    color: #fff;
                    text-decoration: none;
                    padding: 0 15px;
                }

                    .mega-nav .mega-ul li a:hover, .mega-nav .mega-ul li:hover > a {
                        background: #333;
                    }

                .mega-nav .mega-ul li:hover > .mega-div {
                    display: block;
                }

       .mega-div {
            position: absolute;
            top: 100%;
            left: 0;
            width: 450px;
            height: auto;
            padding: 20px 30px;
            background: #333;
            display: none;
            z-index:1000;
        }

        .mega-ul li ul {
            float: left;
            width: 23%;
            margin: 0 2% 15px 0;
            padding: 0;
            list-style: none;
        }

            .mega-ul li ul li {
                display: block;
            }

                .mega-ul li ul li a {
                    float: left;
                    display: block;
                    width: 100%;
                    height: auto;
                    line-height: 1.3em;
                    color: #888;
                    text-decoration: none;
                    padding: 1px 0;
                }

                .mega-ul li ul li:first-child a {
                    font-size: 1.2em;
                    color: #8dc63f;
                }

                .mega-ul li ul li a:hover {
                    color: #fff;
                    background: none;
                }

        .mega-ul ul li:first-child a:hover {
            color: #fff;
        }

        /* clearfix */
        .mega-nav .mega-ul:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }

        .mega-nav .mega-ul {
            display: inline-block;
        }

        .header-title {
            line-height: 59px;
        }

任何帮助都会受到赞赏。

Answer 1

<强> Fiddle

你可以这样做：

.mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div{
    right:0;
    left:auto;
}

这样，从第6个.mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div开始，它将与right:0;对齐。

这要感谢nth-child(1n+6)，这意味着从第6个元素开始，每个元素都有此属性。

它不是最漂亮的替代方案，但你可以乱用它，使它成为left:-50%或right:50%。

如果你知道自己拥有多少并且永远都是这样，并且你知道一个人在哪里工作，你可以使用:nth-child(n)并以这种方式设计。（n是该元素出现的数字）。

Answer 2

从li代码

中删除相对位置

.mega-ul li {
        display: inline-block;
        position: relative; // remove it 
    }

http://jsfiddle.net/vxaAE/1/

走出窗外的巨型菜单

2 个答案: