nav ul { margin: 0; }  nav li { position: relative; display: inline-block; float: left; padding-top:15px; }  nav a { position: relative; z-index: 9999; color: #ffffff; text-decoration: none; display: block; padding: 12px 20px; font-weight: 500; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; font-size:17px; border-radius:20px; }  nav a i[class*="caret"] { color: #fff; margin-left: .15em; font-size:16px; }  nav li:hover a  { color: var(--title); background:#fff; } nav li:hover a i[class*="caret"] { color: var(--renk); } nav a:hover + .submenu { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); visibility: visible;  }  nav .eiob .submenu { -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear; -moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear; }  nav .ln .submenu { -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear; }  nav .ei .submenu { -webkit-transition: all 0.3s ease-in, opacity 0.2s linear; -moz-transition: all 0.3s ease-in, opacity 0.2s linear; transition: all 0.3s ease-in, opacity 0.2s linear; }  nav .eo .submenu { -webkit-transition: all 0.3s ease-out, opacity 0.2s linear; -moz-transition: all 0.3s ease-out, opacity 0.2s linear; transition: all 0.3s ease-out, opacity 0.2s linear; }  nav .submenu { display: block; opacity: 0; position: absolute; visibility: hidden; z-index: 499; width: 280px; top: 100%; left: 0; background: #fff; box-shadow: 0 5px 5px rgba(68, 68, 68, 0.3); -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; border-radius:20px; margin-top:10px; overflow:hidden;   }  nav .submenu li > .submenu { top: 0; left: 100%; }  nav .submenu:hover { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); visibility: visible; }  nav .submenu li { float: none; display: block; padding-top: 0; }  nav .submenu a { width: 100%; display: block; font-weight: 400; padding: 10px 10px 10px 20px; color: var(--renk); font-size:15px; border-radius:0 }  nav .submenu a:hover { background: #f5f0f0; border-color: #f5f0f0; }  nav.rx li:hover + .submenu { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }  nav.rx .submenu { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); }  nav.rx .submenu:hover { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } /*=== Fade Dwn ===*/  nav.fd li:hover + .submenu { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); }  nav.fd .submenu { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); }  nav.fd .submenu:hover { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); }  nav.fu li:hover + .submenu { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); }  nav.fu .submenu { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); }  nav.fu .submenu:hover { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } /*=== Scale ===*/  nav.sc li:hover + .submenu { opacity: 1; -webkit-transform: rotateY(0deg) scale(1); -moz-transform: rotateY(0deg) scale(1); -ms-transform: rotateY(0deg) scale(1); -o-transform: rotateY(0deg) scale(1); transform: rotateY(0deg) scale(1); }  nav.sc .submenu { -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }  nav.sc .submenu:hover { -webkit-transform: rotateY(0deg) scale(1); -moz-transform: rotateY(0deg) scale(1); -ms-transform: rotateY(0deg) scale(1); -o-transform: rotateY(0deg) scale(1); transform: rotateY(0deg) scale(1); } /*==== Rotate ====*/  nav.rt li:hover + .submenu { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }  nav.rt .submenu { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }  nav.rt .submenu:hover { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /*==== Move/Skew In ====*/  nav.mv li:hover + .submenu { -webkit-transform: translateX(0px) skewX(0deg); -moz-transform: translateX(0px) skewX(0deg); -ms-transform: translateX(0px) skewX(0deg); -o-transform: translateX(0px) skewX(0deg); transform: translateX(0px) skewX(0deg); }  nav.mv .submenu { -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: translateX(-40px) skewX(-7deg); -moz-transform: translateX(-40px) skewX(-7deg); -ms-transform: translateX(-40px) skewX(-7deg); -o-transform: translateX(-40px) skewX(-7deg); transform: translateX(-40px) skewX(-7deg); }  nav.mv .submenu:hover { -webkit-transform: skewX(0deg); -moz-transform: skewX(0deg); -ms-transform: skewX(0deg); -o-transform: skewX(0deg); transform: skewX(0deg); } /*==== Door ====*/  nav.dc li:hover + .submenu { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }
nav.dc .submenu { -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); }
nav.dc .submenu:hover { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }