JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div id="tagline">
<ul class="mtaglist">
    <li> Hussain
            <ul>
            <li>jQuery</li>
            <li>Foundation</li>
            <li>Ajax</li>
       </ul>
    </li>
    
    <li> Sufyan
            <ul>
            <li>WordPress</li>
            <li>PHP</li>
            <li>MySQL</li>
       </ul>
    </li>
    

    
    </ul>
    
  
</div>

CSS

#tagline li{
    font-size: 62px;    
}

#tagline .mtaglist li ul{
    display:none;
}

#tagline > .mtaglist li:hover ul{
    display:inline-block;
}

JavaScript

var element = $('#tagline .mtaglist li ul li'),
    length = element.length, 
    current = 0,
    timeout = 3000;

function changeSlide() {
    element.eq(current++).fadeOut(300, function(){
        if(current === length){
            current = 0;
        }
        
        element.eq(current).fadeIn(300);
    });
    
    setTimeout(changeSlide, timeout);
}

element.slice(1).hide();
setTimeout(changeSlide, timeout);