Question

我尝试从下拉菜单更改为Mega菜单。

结构：

<div id="menu" class="col-md-12 menu-inner menu-nav">
    <ul class="nav-effect">
        //looping for HEAD-MENU => Computer
        <li>
            <a>COMPUTER</a>
            <div class="sub-menu">  
                <ul>
                    // looping sub-menu computer => dekstop
                    <li>
                        <ul>
                            <li>DEKSTOP</a></li>
                            //looping FOR SUB-MENU DEKSTOP
                            <li><a>DEKSTOP ASUS</a></li>
                            <li><a>DEKSTOP DELL</a></li>
                            //
                        </ul>
                    </li>
                    //
                </ul>
            </div>
        </li>
    </ul>
</div>

CSS：

.menu-inner {
    background:#26348b;
    margin: 20px 0 15px;
    padding:0!important;
    height: 33px;
}
.menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-nav ul li {
    border-right: 1px solid #fff;
    padding: 7px 59px 3px;
}
.menu-nav ul li li {
    padding: 5px 20px 0 0;
    border-right: none;
    margin: 0 30px 2px 15px;
}
.menu-nav ul li:last-child {border-right: none}
.menu-nav ul li a {
    color: #fff;
    position: relative;
}
.menu-nav ul li a:hover {
    text-decoration: none;
}

.nav-effect li a {
    padding: 0 0 5px;
}

.nav-effect li > a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #f6a328;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}

.nav-effect li > a:hover::after,
.nav-effect li > a:focus::after {
    height: 3px;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}

ul.nav-effect li ul li a {
    font-weight: normal;
}

ul.nav-effect li ul li div ul li a {
    font-weight: normal;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu > ul > li {
    position: relative;
    float: left;
    z-index: 20;

}
#menu > ul > li:hover {
}
#menu > ul > li > a {
    text-decoration: none;
    display: block;
    z-index: 6;
    position: relative;
}

#menu > ul > li > div {
    display: none;
    background: #26348b;
    position: absolute;
    z-index: 5;
    padding: 0 10px;
    margin-top: 3px;
    left: 0;
    border-top:1px solid #fff;
    width: 1170px;              //HERE   <<==
}
#menu > ul > li:hover > div {
    display: table;
}
#menu > ul > li > div > ul {
    display: table-cell;
}
#menu > ul > li ul + ul {
    padding-left: 20px;
}
#menu > ul > li ul > li > ul > li a {
    display: inline-block;
    white-space: nowrap;
    min-width: 110px;
}

.sub-menu > ul > li {
    width:20%;
    float:left;
    display:block;
}
#menu > ul > li > .sub-menu > li ul li:first-child a {
    font-size: 1.2em;
    color: #8dc63f;
}

如果我设置width:1170px; (for sub-menu computer)，它的工作正常但由于某种原因，我不能这样做。

我已经尝试使用宽度：100％，设置填充或边距（每个子菜单都有不同的子菜单）。

如何使它像以前一样（如mega-menu）??

JArray（尝试删除宽度：1170px并最小化空间javascript以完整查看菜单）

谢谢你。

Answer 1

将position:relative设为#menu，不要将position:relative提供给.nav-effect > li，然后将width:100%:设为.sub-menu。

https://jsfiddle.net/epehcvhv/4/

更改宽度Mega菜单CSS

1 个答案: