JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
			
            <ul id="nav">
                <li><a href="index.php"><img src="images/home.png" /> Home</a></li>
              <li><a href="#" class="sub" tabindex="1"><img src="images/categories.png" />Gallery</a><img src="images/up.gif" alt="" />
                    <ul>
                      <li><a href="cars.php"><img src="images/cars.png" />Cars</a></li>
                        <li><a href="movies.php"><img src="images/movies.png" />Movies</a></li>
                        <li><a href="babies.php"><img src="images/baby.jpg" />Babies</a></li>
                        <li><a href="puppies.php"><img src="images/puppies.png" />Puppies</a></li>
                    </ul>
                </li>
				    <li><a href="#" class="sub" tabindex="1"><img src="images/best.png" />Who is the best</a><img src="images/up.gif" alt="" />
                    <ul>
                <li><a href="#"><img src="images/voteforcars.png" />Vote for Cars</a></li>
                <li><a href="#"><img src="images/voteforsport.png" />Vote for Sports</a></li>
                <li><a href="#"><img src="images/voteformovies.jpg" />Vote for Movies</a></li>
				
            </ul>
                <li><a href="#" class="sub" tabindex="1"><img src="images/toplits.png" />Competition</a><img src="images/up.gif" alt="" />
                    <ul>
					<li><a href="#" class="sub" tabindex="1"><img src="images/top.jpg" />Toplists of Weak</a><img src="images/up.gif" alt="" />
						<ul>
                        <li><a href="#"><img src="images/sports.png" />Sports</a></li>
                        <li><a href="#"><img src="images/cars.png" />Cars</a></li>
                        <li><a href="#"><img src="images/movies.png" />Movies</a></li>
                        <li><a href="#"><img src="images/images.png" />Images</a></li>
                        <li><a href="#"><img src="images/baby.jpg" />Babies</a></li>
                    </ul>	
					</li>
					</ul>
         
                
    ...

CSS

li ul{display:none;}

JavaScript

$('#nav').find('li').each(function(){
	    if($(this).children('ul').length>0)
		{
			$(this).addClass('has_contents');
		}
		var second = $(this).children('ul').find('ul');
    if(second.length>0)
		{
			$(this).addClass('has_contents_child');
			$(this).removeClass('has_contents');
		}
		$(this).css('cursor','pointer');

		$(this).click(function(e){
			if($(this).parents('li').hasClass('has_contents_child')){
				$(this).children('ul').slideToggle(200);
				$('#nav ul li').removeClass('active');
				e.stopPropagation();
				return;
			}
			else if($(this).hasClass('has_contents_child active')){
			$(this).children('ul').slideUp();
			$(this).removeClass('active');
			e.stopPropagation();
			}
			else if($(this).hasClass('has_contents active')){
			$(this).children('ul').slideUp();
			$(this).removeClass('active');
				return;
			}
			else{
			 if($('#nav ul').is(':visible')){
			 $('#nav ul').slideUp();
			 $('#nav li').removeClass('active');
			 $(this).removeClass('active');
			 }
			$(this).children('ul').slideDown();
			$(this).addClass('active');
			
			}
			e.stopPropagation();
		});

	});