Question

已经尝试了几个小时但尚未成功将子菜单全宽到窗口 - 我需要它100％宽度可以任何人快速伸出援助之手吗？

我必须覆盖CSS，因为无法触摸默认值，所以我添加了我已覆盖的内容，但当然需要添加它。

在小提琴上，您需要调整输出窗口，这样您就不会获得移动菜单，而是主桌面移动菜单。

DEFAULT CSS：

.ty-menu {
    .user-select(none);
    .clearfix();
}
.ty-menu__items {
    background: @menu;
    position: relative;
    .clearfix();
    .rounded_corners(6px);
}
.ty-menu__item {
    padding: 0px;
    display: block;
    float: left;
}
.ty-menu-rounded();

.ty-menu__item-active .ty-menu__item-link {
    background: darken(@menu, 5%)
}
.no-touch .ty-menu__item:hover .ty-menu__submenu-items,
.is-hover-menu .ty-menu__submenu-items {
    display: block;
}
.no-touch .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link,
.is-hover-menu.ty-menu__item-active .ty-menu__item-link {
    background: darken(@menu, 3%);
    color: white;
    text-shadow: none;
}
.ty-menu__item .ty-menu__item-link {
    color: @menu_links;
    position: relative;
    padding: 13px 20px;
    display: block;
    min-height: 46px;
    cursor: pointer;
    .box-sizing(border-box);
}

.ty-menu__item .ty-menu__item-link .ty-icon-down-micro {
    position: absolute;
    font-size: 20px;
    right: 12px;
    top: 13px;
}
.ty-menu__submenu-items {
    min-width: 200px;
    display: none;
    position: absolute;
    background: white;
    z-index: 100;
    border: 1px solid darken(@menu, 4%);
    border-top: 0;
    padding: 15px 16px;
}
.ty-menu__submenu-items .ty-menu__submenu-item {
    margin-bottom: 10px;
}
.ty-menu__submenu-items .ty-menu__submenu-link {
    color: @links;
}
.ty-menu__submenu-items .ty-top-mine__submenu-col {
    margin: 0px 10px 0px 0px;
    display: inline-block;
    vertical-align: top;
    min-width: 139px;
}
.ty-menu__submenu-items .ty-top-mine__submenu-col:last-child {
    margin-right: 1px;
}
.ty-menu__submenu-item-header {
    min-height: 25px;
    margin-bottom: 10px;
    padding-bottom: 2px;
    border-bottom: 1px solid #e5e5e5;
}
.ty-menu__submenu-item-header .ty-menu__submenu-link {
    font-weight: bold;
    color: @links;
}
.ty-menu__submenu .ty-menu__submenu-items .ty-menu__submenu-item-active a {
    color: #FFF;
    background: @links;
    padding: 2px 6px;
}
.ty-menu__submenu-dropdown-bottom {
    display: block;
    background: #ECF0F1;
    margin: 0px -16px -15px;
    padding: 10px;
    text-align: right;
}
.ty-menu-rounded() when (@rounded_corners = true) {
    .ty-menu__item:nth-child(2) .ty-menu__item-link {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    .ty-menu__submenu-items {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }
}

CSS改写默认：

.ty-menu {
    border-bottom: 0;
}
.ty-menu__items {
    background: none;
    display: table;
    margin: 0 auto;
}
.ty-menu__item-active .ty-menu__item-link {
    background: none;
    font-weight: bold;
    padding: 18px 20px;
    min-height: 100%;
    padding: 14px 20px;
}
.ty-menu__item .ty-menu__item-link {
    color: #ffffff;
}
.no-touch .ty-menu__item:hover .ty-menu__item-link, .is-hover-menu .ty-menu__item-link, .is-hover-menu.ty-menu__item-active .ty-menu__item-link {
    background: #ffffff;
    color: #333;
}
.ty-menu__submenu-items, .ty-dropdown-box__content {
    border: 1px solid #dadada;
    border-top: 0;
}
.ty-dropdown-box__title.open {
    background: #dadada;
}
.ty-dropdown-box__title.open .ty-minicart-title {
    color: #333;
}
/* submenu */
 .ty-menu__submenu-to-right .ty-menu__submenu-items {
    right: auto;
}
.ty-menu__submenu .ty-menu__submenu {
    float: left;
    width: 240px;
}
.ty-menu__submenu .ty-menu__submenu li span {
    border-bottom: 1px solid #dadada;
    display: block;
    font-weight: bold;
    margin: 0 15px 10px;
    padding: 0 0 5px;
}
.ty-menu__submenu .ty-menu__submenu li a {
    padding: 4px 20px 5px 6px;
    margin: 0 10px;
}
/* Tablet */
 @media only screen and (max-width: 959px) {
}
/* Mobile */
 @media only screen and (max-width: 767px) {
    /* Social Count */
    .socialCount {
        text-align: center;
    }
    .cart-status {
        text-align: center;
        margin: 13px 0;
    }
    /* Make menu full width */
    .ty-menu__item.ty-menu__menu-btn.visible-phone, .ty-menu__items.cm-responsive-menu {
        width: 100%;
    }
    .ty-menu__submenu .ty-menu__submenu {
        float: none;
        width: 100%;
    }
    /* hide sub menu image */
    .ty-menu__submenu-items li img {
        display: none;
    }
    .ty-menu__submenu .ty-menu__submenu-items .ty-menu__submenu-item .ty-menu__submenu-link {
        padding: 12px 30px 12px 20px;
    }
    .ty-menu__submenu .ty-menu__submenu-items .ty-menu__submenu-item .ty-menu__submenu-link.third-level {
        padding: 12px 30px 12px 40px;
    }
}
/* Mini */
 @media only screen and (max-width: 479px) {
}

Answer 1

你只需要将悬停菜单放在相对位置，你就是正确的方式。将其添加到您的代码中：

.ty-menu__submenu-items{
      position: absolute;
      left: 0;
      width: 100%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
}

这是一个工作小提琴： http://jsfiddle.net/alessiozuccotti/e13bkvyb/7/

CSS菜单 - 使子菜单下拉全宽

1 个答案: