JSFiddle - React, Tailwind, and code Playground

by El_Mehdi

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="./MultiNestedListTree.css">
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<body>
    <div>
        <!-- class="container body-content"> -->
        <div>
        <!--class="container"-->
			<ul>
				<li>
					<a href="#">Manchester</a>
					<ul>
						<li>
							<a href="#">Magazine</a>
							<ul>
								<li><a href="#">Spiral Scratch</a></li>
								<li><a href="#">Real Life</a></li>
								<li><a href="#">Secondhand Daylight</a></li>
								<li><a href="#">The Correct Use</a></li>
							</ul>
						</li>
						<li>
							<a href="#">Buzzcocks</a>
							<ul>
								<li><a href="#">Time's Up</a></li>
								<li><a href="#">Another Music in A Different Kitchen</a></li>
								<li><a href="#">Love Bites</a></li>
								<li><a href="#">A Different Kind Of Tension</a></li>
							</ul>
						</li>
						<li>
							<a href="#">Joy Division</a>
							<ul>
								<li><a href="#">Unknown Pleasures</a></li>
								<li><a href="#">Closer</a></li>
								<li><a href="#">Still</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Liverpool</a>
					<ul>
						<li>
							<a href="#">OMD</a>
							<ul>
								<li><a href="#">OMD</a></li>
								<li><a href="#">Organisation</a></li>
							</ul>
						</li>
						<li>
							<a href="#">Echo & the Bunnymen</a>
							<ul>
								<li><a href="#">Crocodiles</a></li>
								<li><a href="#">Heaven Up Here</a></li>
								<li><a...

CSS

ul {
    padding: 0em;
    width: 100%;
    height: 20px;
    text-align: center;
    display: flex;
}

ul li, ul li ul li {
    position:relative;
    top:0;
    bottom:0;
    padding-bottom: 7px;

}

li {
    display: inline-block;
    white-space: nowrap;
    *display: inline; /*IE7*/
    *zoom: 1; /*IE7*/
    margin-right: 25px;
    list-style-type: none;
    width: inherit;
    float: none;
    text-align: right;
}

li a {
    padding:0 0 0 10px;
    position: relative;
    top:1em;
}

li a:hover {
    text-decoration: none;
}

JavaScript

// Select the main list and add the class "hasSubmenu" in each LI that contains an UL
$('ul').each(function(){
  $this = $(this);
  $this.find("li").has("ul").addClass("hasSubmenu");
});
// Find the last li in each level
$('li:last-child').each(function(){
  $this = $(this);
  // Check if LI has children
  if ($this.children('ul').length !== 0){
    // Add the class "addBorderBefore" to create the pseudo-element :defore in the last li
    $this.closest('ul').children("li").last().children("a").addClass("addBorderBefore");
    // Add margin in the first level of the list
    $this.closest('ul').css("margin-top","20px");
    // Add margin in other levels of the list
    $this.closest('ul').find("li").children("ul").css("margin-top","20px");
  };
});

// Add bold in li and levels above
$('ul li').each(function(){
  $this = $(this);
  $this.mouseenter(function(){
    $( this ).children("a").css({"font-weight":"bold","color":"#336b9b"});
  });
  $this.mouseleave(function(){
    $( this ).children("a").css({"font-weight":"normal","color":"#428bca"});
  });
});
// Add button to expand and condense - Using FontAwesome
$('ul li.hasSubmenu').each(function(){
  $this = $(this);
  $this.prepend("<a href='#'><i class='fa fa-minus-circle'></i><i style='display:none;' class='fa fa-plus-circle'></i></a>");
  $this.children("a").not(":last").removeClass().addClass("toogle");
});
// Actions to expand and consense
$('ul li.hasSubmenu a.toogle').click(function(){
  $this = $(this);
  $this.closest("li").children("ul").toggle("slow");
  $this.children("i").toggle();
  return false;
});

/* My Changes */
$('ul').not(':first').css('position', 'absolute');
$('li').css('text-align', 'start');

$('ul li:first-child').each(function () {
    $this = $(this);
    $this.prepend('<b style = "display: inline-block; width: 55px; height: 25px; position: relative; left: 0em; border-bottom: 4px solid gray; border-left: 4px solid gray; margin-bottom: -10px;">...