Cara Membuat Menu Dropdown Dengan Style Concept Elegan

Selamat Datang Di Tutorial PalmaHutabarat Menu Dropdown Style Concept Menu Akan Berbeda Bentuk Jika Dicoba Di Browser Lain. Tampilan Menarik...

Selamat Datang Di Tutorial PalmaHutabarat

Pada kali Ini Saya Nge Posting Tentang menu Dropdown , Yang Bisa Dibilang Lumayan Menarik, beda dari yang lain nya . Saya menemukan ini Dribbble . Jangan tanya saya bagaimana mendapatkan nya, saya hanya tidak ingat bagaimana saya bisa menjawab semua pertanyaan semua yang diberikan kepada saya saat meminta Menu berbentuk ELEGAN, tapi satu hal jelas saya ingat: saya telah bookmarked konsep menu dropdown ini, menatapnya sebentar dan kemudian aku berpikir tentang membuat sesuatu yang mirip dengan CSS nya... sebenarnya CSS nya itu saya UBAH Cari SCSS dari code aslinya, Jika Bertanya tanya saja sepenting nya.

/* Main level PH */
.menu {          
    margin: 50px auto;
    width: 800px;
    width: fit-content;   
}

.menu > li {
    background: #34495e;
    float: left;
    position: relative;
    transform: skewX(25deg);
}

.menu a {
    display: block;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-family: Arial, Helvetica;
    font-size: 14px;
}        

.menu li:hover {
    background: #e74c3c;
}        

.menu > li > a {
    transform: skewX(-25deg);
    padding: 1em 2em;
}

/* Dropdown level*/
.submenu {
    position: absolute;
    width: 200px;
    left: 50%; margin-left: -100px;
    transform: skewX(-25deg);
    transform-origin: left top;
}

.submenu li {
    background-color: #34495e;
    position: relative;
    overflow: hidden;       
}                        

.submenu > li > a {
    padding: 1em 2em;            
}

.submenu > li::after {
    content: '';
    position: absolute;
    top: -125%;
    height: 100%;
    width: 100%;         
    box-shadow: 0 0 50px rgba(0, 0, 0, .9);           
}        

/* Odd stuff PH */
.submenu > li:nth-child(odd){
    transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
    transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
    right: -50%;
    transform: skewX(-25deg) rotate(3deg);
}                

/* Even stuff PH */
.submenu > li:nth-child(even){
    transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
    transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
    left: -50%;
    transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown PH */
.submenu,
.submenu li {
    opacity: 0;
    visibility: hidden;         
}

.submenu li {
    transition: .2s ease-out transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
    opacity: 1;
    visibility: visible;
}        

.menu > li:hover .submenu li:nth-child(even){
    transform: skewX(25deg) translateX(15px);          
}

.menu > li:hover .submenu li:nth-child(odd){
    transform: skewX(-25deg) translateX(-15px);            
}

<ul class="menu cf">
    <li><a href="">HOME PH</a></li>
    <li>
        <a href="http://palmahutabarat69.blogspot.com/">Menus PH</a>
        <ul class="submenu">
            <li><a href="http://palmahutabarat69.blogspot.com/">Submenu PH</a></li>
            <li><a href="http://palmahutabarat69.blogspot.com/">Submenu PH</a></li>
            <li><a href="http://palmahutabarat69.blogspot.com/">Submenu PH</a></li>
            <li><a href="http://palmahutabarat69.blogspot.com/">Submenu PH</a></li>
        </ul>         
    </li>
    <li><a href="http://palmahutabarat69.blogspot.com/">Menus PH</a></li>
    <li><a href="http://palmahutabarat69.blogspot.com/">Menus PH</a></li>
    <li><a href="http://palmahutabarat69.blogspot.com/">Menus PH</a></li>
</ul>