Я отобразил <ul> display: flex;. <li> переходят в новый столбец, но <li> не расширяется с шириной <ul>, вызывая эффект переполнения.
// 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;"> </b>');
});
$('ul').not(':first').each(function () {
$this = $(this);
var positionLeft = 0;
if ($this.closest("li").is(":first-child")) positionLeft = positionLeft + 55; // 55 is this.closest("li:before") width
positionLeft = positionLeft + 10; // 50 for 'li a padding-left=10';
positionLeft = positionLeft + $this.prev("a").width() / 2; // item text
$this.css('left', positionLeft);
});
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;
}
<!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 href="#">Porcupine</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./MultiNestedListTree.js"></script>
</body>
</html>