我的多级导航菜单CSS有问题有人可以帮助我吗？

问题描述 投票：0回答：1

我的子菜单与其父菜单显示在同一行，我想从顶部显示它意味着每个子菜单 ul 与顶部没有间隙。

现在运行良好，只是需要从屏幕截图中删除间隙。 在此输入图片描述 它需要与 https://thephonelab.nl/ 相同，当你放置任何 li 时，你可以看到这里没有顶部填充或边距。我需要同样的外观

我的html是

<div class="nav">
                    <div class="new_menu_class"><ul id="menu-header" class="menu"><li id="menu-item-544" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-544"><a href="https://ferry2.simpelfix.ch/repairs/iphone/">Repairs</a>
<ul class="sub-menu">
    <li id="menu-item-556" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-556"><a href="https://ferry2.simpelfix.ch/repairs/iphone/">iPhone Reparatie</a>
    <ul class="sub-menu">
        <li id="menu-item-932" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-932"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-16">iPhone 16 Series</a>
        <ul class="sub-menu">
            <li id="menu-item-803" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-803"><a href="https://ferry2.simpelfix.ch/iphone-16-pro-max-reparatie/">iPhone 16 Pro Max</a></li>
            <li id="menu-item-804" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-804"><a href="https://ferry2.simpelfix.ch/iphone-16-pro-reparatie/">iPhone 16 Pro</a></li>
            <li id="menu-item-802" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-802"><a href="https://ferry2.simpelfix.ch/iphone-16-plus-reparatie/">iPhone 16 Plus</a></li>
            <li id="menu-item-805" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-805"><a href="https://ferry2.simpelfix.ch/iphone-16-reparatie/">iPhone 16</a></li>
        </ul>
</li>
        <li id="menu-item-933" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-933"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-15">iPhone 15 Series</a>
        <ul class="sub-menu">
            <li id="menu-item-799" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-799"><a href="https://ferry2.simpelfix.ch/iphone-15-pro-max-reparatie/">iPhone 15 Pro Max</a></li>
            <li id="menu-item-800" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-800"><a href="https://ferry2.simpelfix.ch/iphone-15-pro-reparatie/">iPhone 15 Pro</a></li>
            <li id="menu-item-798" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-798"><a href="https://ferry2.simpelfix.ch/iphone-15-plus-reparatie/">iPhone 15 Plus</a></li>
            <li id="menu-item-801" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-801"><a href="https://ferry2.simpelfix.ch/iphone-15-reparatie/">iPhone 15</a></li>
        </ul>
</li>
        <li id="menu-item-934" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-934"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-14">iPhone 14 Series</a>
        <ul class="sub-menu">
            <li id="menu-item-795" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-795"><a href="https://ferry2.simpelfix.ch/iphone-14-pro-max-reparatie/">iPhone 14 Pro Max</a></li>
            <li id="menu-item-796" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-796"><a href="https://ferry2.simpelfix.ch/iphone-14-pro-reparatie/">iPhone 14 Pro</a></li>
            <li id="menu-item-794" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-794"><a href="https://ferry2.simpelfix.ch/iphone-14-plus-reparatie/">iPhone 14 Plus</a></li>
            <li id="menu-item-797" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-797"><a href="https://ferry2.simpelfix.ch/iphone-14-reparatie/">iPhone 14</a></li>
        </ul>
</li>
        <li id="menu-item-935" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-935"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-13">iPhone 13 Series</a>
        <ul class="sub-menu">
            <li id="menu-item-791" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-791"><a href="https://ferry2.simpelfix.ch/iphone-13-pro-max-reparatie/">iPhone 13 Pro Max</a></li>
            <li id="menu-item-792" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-792"><a href="https://ferry2.simpelfix.ch/iphone-13-pro-reparatie/">iPhone 13 Pro</a></li>
            <li id="menu-item-790" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-790"><a href="https://ferry2.simpelfix.ch/iphone-13-mini-reparatie/">iPhone 13 Mini</a></li>
            <li id="menu-item-793" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-793"><a href="https://ferry2.simpelfix.ch/iphone-13-reparatie/">iPhone 13</a></li>
        </ul>
</li>
        <li id="menu-item-943" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-943"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-12">iPhone 12 Series</a>
        <ul class="sub-menu">
            <li id="menu-item-945" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-945"><a href="https://ferry2.simpelfix.ch/iphone-12-pro-max-reparatie/">iPhone 12 Pro Max</a></li>
            <li id="menu-item-946" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-946"><a href="https://ferry2.simpelfix.ch/iphone-12-pro-reparatie/">iPhone 12 Pro</a></li>
            <li id="menu-item-944" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-944"><a href="https://ferry2.simpelfix.ch/iphone-12-mini-reparatie/">iPhone 12 Mini</a></li>
            <li id="menu-item-947" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-947"><a href="https://ferry2.simpelfix.ch/iphone-12-reparatie/">iPhone 12</a></li>
        </ul>
</li>
        <li id="menu-item-937" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-937"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-11">iPhone 11 Series</a>
        <ul class="sub-menu">
            <li id="menu-item-948" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-948"><a href="https://ferry2.simpelfix.ch/iphone-11-pro-max-reparatie/">iPhone 11 Pro Max</a></li>
            <li id="menu-item-949" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-949"><a href="https://ferry2.simpelfix.ch/iphone-11-pro-reparatie/">iPhone 11 Pro</a></li>
            <li id="menu-item-950" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-950"><a href="https://ferry2.simpelfix.ch/iphone-11-reparatie/">iPhone 11</a></li>
        </ul>
</li>
        <li id="menu-item-951" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-951"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-x">iPhone X Series</a>
        <ul class="sub-menu">
            <li id="menu-item-817" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-817"><a href="https://ferry2.simpelfix.ch/iphone-xs-max-reparatie/">iPhone XS Max</a></li>
            <li id="menu-item-952" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-952"><a href="https://ferry2.simpelfix.ch/iphone-xs-reparatie/">iPhone XS</a></li>
            <li id="menu-item-816" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-816"><a href="https://ferry2.simpelfix.ch/iphone-xr-reparatie/">iPhone XR</a></li>
            <li id="menu-item-815" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-815"><a href="https://ferry2.simpelfix.ch/iphone-x-reparatie/">iPhone X</a></li>
        </ul>
</li>
        <li id="menu-item-953" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-953"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-8">iPhone 8 Series</a>
        <ul class="sub-menu">
            <li id="menu-item-956" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-956"><a href="https://ferry2.simpelfix.ch/iphone-8-plus-reparaties/">iPhone 8 Plus</a></li>
            <li id="menu-item-957" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-957"><a href="https://ferry2.simpelfix.ch/iphone-8-reparaties/">iPhone 8</a></li>
        </ul>
</li>
        <li id="menu-item-1006" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1006"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-7">iPhone 7 Series</a>
        <ul class="sub-menu">
            <li id="menu-item-954" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-954"><a href="https://ferry2.simpelfix.ch/iphone-7-plus-reparaties/">iPhone 7 Plus</a></li>
            <li id="menu-item-955" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-955"><a href="https://ferry2.simpelfix.ch/iphone-7-reparaties/">iPhone 7</a></li>
        </ul>
</li>
        <li id="menu-item-958" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-958"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-7">iPhone 6 Series</a>
        <ul class="sub-menu">
            <li id="menu-item-959" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-959"><a href="https://ferry2.simpelfix.ch/iphone-6-plus-reparatie/">iPhone 6 Plus</a></li>
            <li id="menu-item-960" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-960"><a href="https://ferry2.simpelfix.ch/iphone-6-reparaties/">IPhone 6</a></li>
            <li id="menu-item-961" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-961"><a href="https://ferry2.simpelfix.ch/iphone-6s-plus-reparaties/">iPhone 6S Plus</a></li>
            <li id="menu-item-962" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-962"><a href="https://ferry2.simpelfix.ch/iphone-6s-reparaties/">IPhone 6S</a></li>
        </ul>
</li>
        <li id="menu-item-1007" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1007"><a href="https://ferry2.simpelfix.ch/repairs/iphone/?series=iphone-se">iPhone SE Series</a>
        <ul class="sub-menu">
            <li id="menu-item-1043" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1043"><a href="#">iPhone SE 2022</a></li>
            <li id="menu-item-963" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-963"><a href="https://ferry2.simpelfix.ch/iphone-se-2020-reparatie/">iPhone SE 2020</a></li>
            <li id="menu-item-1042" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1042"><a href="#">iPhone SE 2016</a></li>
        </ul>
</li>
    </ul>
</li>
    <li id="menu-item-964" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-964"><a href="https://ferry2.simpelfix.ch/repairs/samsung">Samsung Reparatie</a>
    <ul class="sub-menu">
        <li id="menu-item-968" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-968"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s24-ultra-reparatie/">Galaxy S24 Ultra</a></li>
        <li id="menu-item-966" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-966"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s24-plus-reparatie/">Galaxy S24 Plus</a></li>
        <li id="menu-item-967" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-967"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s24-reparatie/">Galaxy S24</a></li>
        <li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-979"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s23-ultra-reparatie/">Galaxy S23 Ultra</a></li>
        <li id="menu-item-977" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-977"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s23-plus-reparatie/">Galaxy S23 Plus</a></li>
        <li id="menu-item-978" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-978"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s23-reparatie/">Galaxy S23</a></li>
        <li id="menu-item-976" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-976"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s22-ultra-reparatie/">Galaxy S22 Ultra</a></li>
        <li id="menu-item-974" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-974"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s22-plus-reparatie/">Galaxy S22 Plus</a></li>
        <li id="menu-item-975" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-975"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s22-reparatie/">Galaxy S22</a></li>
        <li id="menu-item-970" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-970"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s21-fe-reparatie/">Galaxy S21 FE</a></li>
        <li id="menu-item-973" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-973"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s21-ultra-reparatie/">Galaxy S21 Ultra</a></li>
        <li id="menu-item-971" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-971"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s21-plus-reparatie/">Galaxy S21 Plus</a></li>
        <li id="menu-item-972" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-972"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s21-reparatie/">Galaxy S21</a></li>
        <li id="menu-item-985" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-985"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s20-ultra-reparatie/">Galaxy S20 Ultra</a></li>
        <li id="menu-item-982" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-982"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s20-fe-reparatie/">Galaxy S20 FE</a></li>
        <li id="menu-item-983" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-983"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s20-plus-reparatie/">Galaxy S20 Plus</a></li>
        <li id="menu-item-984" class="menu-item menu-item-type-post_type menu-item-object-models menu-item-984"><a href="https://ferry2.simpelfix.ch/samsung-galaxy-s20-reparatie/">Galaxy S20</a></li>
    </ul>
</li>
    <li id="menu-item-571" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-571"><a href="#">Xiaomi</a></li>
    <li id="menu-item-570" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-570"><a href="#">OnePlus</a></li>
    <li id="menu-item-568" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-568"><a href="#">Google</a></li>
    <li id="menu-item-569" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-569"><a href="#">Macbook</a></li>
</ul>
</li>
<li id="menu-item-541" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-541"><a href="https://ferry2.simpelfix.ch/pricing/">Pricing</a></li>
<li id="menu-item-581" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-581"><a href="https://ferry2.simpelfix.ch/tracking/">Tracking Your Booking</a></li>
<li id="menu-item-540" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-540"><a href="https://ferry2.simpelfix.ch/about-us/">About Us</a></li>
<li id="menu-item-988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-988"><a href="https://ferry2.simpelfix.ch/contact/">Contact</a></li>
</ul></div> 
            </div>

尝试过CSS

.header .nav ul li {
    position: relative;
    line-height: 80px;
}

/* Ensure only the immediate child submenu is shown */
.header .nav ul li:hover > ul.sub-menu {
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    visibility: visible;
    opacity: 1;
}

/* Submenu hidden by default */
.header .nav ul li ul.sub-menu {
    position: absolute;
    background: #ffffff;
    left: 0;
    min-width: 230px;
    margin-top: 5px;
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    transition: all .2s ease-in-out;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    border-radius: 10px;
    box-shadow: 0px 0px 12px rgba(10, 10, 10, .1);
}

.header .nav ul li ul.sub-menu li.menu-item-has-children {
    position: relative;
}

.header .nav ul li ul.sub-menu li {
    display: block;
    position: static;
    width: 100%;
    text-align: left;
    line-height: 38px;
    padding: 0;
}

.header .nav ul li ul.sub-menu li:hover {
    background-color: #ffffff8c;
}


.header .nav ul li ul.sub-menu li a {
    margin: 0;
    border-radius: 0;
    position: relative;
    width: 100%;
    display: inline-block;
    padding: 7px 15px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.header .nav ul li ul.sub-menu li:first-child a {
    border-radius: 10px 10px 0 0;
}

.header .nav ul li ul.sub-menu li:last-child a {
    border-radius: 0 0 10px 10px;
}

/* Submenu within submenu - hidden by default */
.header .nav ul li ul.sub-menu li ul.sub-menu {
    -ms-transform: translateX(calc(100% + 10px));
    transform: translateX(calc(100% + 10px));
    top: -5px;
    min-height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    background: #f5f5f7;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    box-shadow: 5px 5px 5px rgba(10, 10, 10, .1);
}

/* Show only the hovered submenu's child submenu */
.header .nav ul li ul.sub-menu li:hover > ul.sub-menu {
    -ms-transform: translateX(calc(100% - 2px));
    transform: translateX(calc(100% - 2px));
    opacity: 1;
    visibility: visible;
}

.header .nav ul li ul.sub-menu li ul.sub-menu a {
    font-weight: normal;
    color: #353439;
}

.header .nav ul li ul.sub-menu li ul.sub-menu a:hover {
    color: #e72329;
}


.header .nav ul li ul.sub-menu li.menu-item-has-children::after {
    content: "";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PHBhdGggZD0iTTM4NS4xIDIxOS45IDE5OS4yIDM0Yy0yMC0yMC01Mi4zLTIwLTcyLjMgMHMtMjAgNTIuMyAwIDcyLjNMMjc2LjcgMjU2IDEyNi45IDQwNS43Yy0yMCAyMC0yMCA1Mi4zIDAgNzIuM3M1Mi4zIDIwIDcyLjMgMGwxODUuOS0xODUuOWMxOS45LTE5LjkgMTkuOS01Mi4zIDAtNzIuMnoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48L2c+PC9zdmc+');
    display: inline-block;
    position: absolute;
    top: 50%; /* Adjusted for cross-browser consistency */
    transform: translateY(-50%); /* Vertically centers the icon */
    width: 10px;
    height: 10px;
    right: 10px; /* Instead of margin-left, use right for better positioning */
    background-size: cover; /* Changed from contain to cover */
    background-repeat: no-repeat; /* Ensure the icon doesn't repeat */
}
html css wordpress menu nav
1个回答
0
投票

子菜单是 

position: absolute
，因此它们的父菜单必须是 
relative
，并且它应该是顶部菜单，这样 
top: 0
才是正确的位置。所以我从所有中间父母身上删除了
relative
。

这对具有子菜单的项目的插入符号造成了一些问题。但我通过不使用 

position: relative
来解决这个问题。可能需要进一步调整。




li


.header .new_menu_class .menu {
  display: flex;
  gap: 20px;
  background: red;
  position: relative;
}

.header .nav ul li {
  line-height: 80px;
  display: block;
}


/* Ensure only the immediate child submenu is shown */

.header .nav ul li:hover>ul.sub-menu {
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
  visibility: visible;
  opacity: 1;
}


/* Submenu hidden by default */

.header .nav ul li ul.sub-menu {
  position: absolute;
  background: #ffffff;
  left: 0;
  min-width: 230px;
  margin-top: 5px;
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  transition: all .2s ease-in-out;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  border-radius: 10px;
  box-shadow: 0px 0px 12px rgba(10, 10, 10, .1);
}

.header .nav ul li ul.sub-menu li.menu-item-has-children {
  //  position: relative;
}

.header .nav ul li ul.sub-menu li {
  display: block;
  position: static;
  width: 100%;
  text-align: left;
  line-height: 38px;
  padding: 0;
}

.header .nav ul li ul.sub-menu li:hover {
  background-color: #ffffff8c;
}

.header .nav ul li ul.sub-menu li a {
  margin: 0;
  border-radius: 0;
  //position: relative;
  width: 100%;
  display: inline-block;
  padding: 7px 15px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.header .nav ul li ul.sub-menu li:first-child a {
  border-radius: 10px 10px 0 0;
}

.header .nav ul li ul.sub-menu li:last-child a {
  border-radius: 0 0 10px 10px;
}


/* Submenu within submenu - hidden by default */

.header .nav ul li ul.sub-menu li ul.sub-menu {
  -ms-transform: translateX(calc(100% + 10px));
  transform: translateX(calc(100% + 10px));
  top: -5px;
  min-height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  background: #f5f5f7;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  box-shadow: 5px 5px 5px rgba(10, 10, 10, .1);
}


/* Show only the hovered submenu's child submenu */

.header .nav ul li ul.sub-menu li:hover>ul.sub-menu {
  -ms-transform: translateX(calc(100% - 2px));
  transform: translateX(calc(100% - 2px));
  opacity: 1;
  visibility: visible;
}

.header .nav ul li ul.sub-menu li ul.sub-menu a {
  font-weight: normal;
  color: #353439;
}

.header .nav ul li ul.sub-menu li ul.sub-menu a:hover {
  color: #e72329;
}

.header .nav ul li ul.sub-menu li.menu-item-has-children>a {
  position: relative;
}

.header .nav ul li ul.sub-menu li.menu-item-has-children>a::after {
  content: "";
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PHBhdGggZD0iTTM4NS4xIDIxOS45IDE5OS4yIDM0Yy0yMC0yMC01Mi4zLTIwLTcyLjMgMHMtMjAgNTIuMyAwIDcyLjNMMjc2LjcgMjU2IDEyNi45IDQwNS43Yy0yMCAyMC0yMCA1Mi4zIDAgNzIuM3M1Mi4zIDIwIDcyLjMgMGwxODUuOS0xODUuOWMxOS45LTE5LjkgMTkuOS01Mi4zIDAtNzIuMnoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48L2c+PC9zdmc+');
  display: inline-block;
  position: absolute;
  top: 50%;
  /* Adjusted for cross-browser consistency */
  transform: translateY(-50%);
  /* Vertically centers the icon */
  width: 10px;
  height: 10px;
  right: 10px;
  /* Instead of margin-left, use right for better positioning */
  background-size: cover;
  /* Changed from contain to cover */
  background-repeat: no-repeat;
  /* Ensure the icon doesn't repeat */
}





    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.