Tạo Fly drop Menu cực đẹp từ CSS cho blogspot

Tạo Fly drop Menu cực đẹp từ CSS cho blogspot

XEM DEMO

Tạo Menu có hiệu ứng mờ ảo đẹp cho blogger

.aii:before,
.aii:after {
    content: " ";
    display: table;
}

.aii:after {
    clear: both;
}

.aii {
    *zoom: 1;
}
/* Menu chính */
.menu {            
    margin: 50px auto;
    width: 800px;
    width: fit-content;    
}

.menu  li {list-style:none!important;
    background: 
    float: left;
    position: relative;
    transform: skewX(25deg);
}

.menu a {
    display: block;
    color: 
    text-transform: uppercase;
    text-decoration: none;
    font-family: Arial;
    font-size: 13px;
}        

.menu li:hover {
    background: 
}        

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

/* Trình Menu thả xuống*/
.submenu {
    position: absolute;
    width: 200px;
    left: 50%; margin-left: -100px;
    transform: skewX(-25deg);
    transform-origin: left top;
}

.submenu li {
    background-color: 
    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 */
.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 */
.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);
}

/* Xem menu thả xuống */
.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 aii"
    lia href=""Menu 1/a/li
    li
        a href=""Menu 2/a
        ul class="submenu"
            lia href=""Submenu 1/a/li
            lia href=""Submenu 2/a/li
            lia href=""Submenu 3/a/li
        /ul            
    /li
    li
        a href=""Menu 3/a
        ul class="submenu"
            lia href=""Submenu 1/a/li
            lia href=""Submenu 2/a/li
            lia href=""Submenu 3/a/li
            lia href=""Submenu 4/a/li
        /ul            
    /li
    lia href=""Menu 4/a/li
    lia href=""Menu 5/a/li
/ul

Vậy là xong , chúc các bạn thành công với hiệu ứng menu đẹp lung linh này !

Theo Namka.blogspot.com