/* Change the width of the dropdown container */
.dl-menu ul.sub-menu {
    width: 300px;
}

/* Change the width of the links inside the dropdown */
.dl-menu ul.sub-menu li,
.dl-menu ul.sub-menu li a {
    width: 100%;
}

/* Position the second level dropdown correctly */
.dl-menu .nav li li ul {
    left: 300px;
}
.dl-menu .nav li.et-reverse-direction-nav li ul {
    left:auto;
    right:300px;
}

/* Extend dropdown links full-width */
.dl-menu .nav li li {
    padding: 0;
    min-width: 100%;
}
.dl-menu .nav li li a {
    min-width: 100%;
}

/* Change the dropdown links font */
.dl-menu .nav li li a {
    text-transform:none;
    font-weight:400;
    font-size:16px;
}

/* Change the dropdown links hover effect */
.dl-menu.et_pb_module.et_pb_menu .nav li li a {
    transition: all .3s ease-in-out;
}
.dl-menu.et_pb_module.et_pb_menu .nav li li a:hover {
    background:#ead8c0;
    opacity:1;
    padding-left:28px;
}

/* Remove the dropdown border and inner spacing */
.dl-menu.et_pb_menu .et-menu-nav ul.sub-menu {
    padding: 0;
    border-top: 0;
}

/* Move the first-level dropdown to the left */
.dl-menu ul.nav > li > ul.sub-menu {
    transform: translateX(-9px);
}

/* Add rounded corners to the dropdown container */
.dl-menu.et_pb_menu .et-menu-nav ul.sub-menu {
    border-radius:10px;
}

/* Add rounded corners to the first dropdown item */
.dl-menu ul.sub-menu li:first-child a {
    border-radius: 10px 10px 0 0;
}

/* Add rounded corners to the last dropdown item */
.dl-menu ul.sub-menu li:last-child a {
    border-radius: 0 0 10px 10px;
}

/* Remove the dropdown shadow */
.dl-menu.et_pb_menu .et-menu-nav ul.sub-menu {
    box-shadow: none;
}

/* Add triangle arrow to the dropdown */
.dl-menu ul.nav > li > ul.sub-menu:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #000000 transparent;
    position: absolute;
    top: -10px;
    left: 30px;
}

/* Move the arrow to the center */
.dl-menu ul.nav > li > ul.sub-menu:before {
    left: 50%;
    transform: translateX(-50%);
}

/* Center-align the dropdown */
.dl-menu ul.nav > li > ul.sub-menu {
    transform:translateX(-50%);
    left:50%;
    transition: all .3s ease-in-out;
}

  .nav li li ul  {
    top: 0 !important;
  }