Need help with CSS

Hello everyone,

Among several open-source shopping carts, I chose one based on CI found on GitHub for my e-commerce project but now stuck with a sidebar navigation menu. I have searched the web but cannot find a way to style my menu to display and organize content like menu that will open to the right and display all sub-menus in rows and columns.

What I have actually achieved with some CSS tweaks is a tree view (vertical) menu but what I want is make each category, upon hover, display sub-menus in a row/column (horizontal) within a single big table. Fact is because of the database-driven categories nature of CI, I'm  not even sure which chunks of code to present here, so not to overwhelm anyone. Any help is greatly appreciated and I hope, most importantly to be able to learn how to maintain the code, how each part works because I love it.

This is what I have:
Category 1

Sub1
    Item1
Sub2
    Item2
Sub3
    Item3
Sub4
    Item4

Category 2

Sub1
    Item1
Sub2
    Item2
Sub3
    Item3
Sub4
    Item4


This is what I want:
Category 1 Sub1  Sub2  Sub3  Sub4
                  Item1  Item2  Item3  Item4 


Category 2 Sub1  Sub2  Sub3  Sub4
                  Item1  Item2  Item3  Item4



Homepage VIEW:

Code:

<div id="nav-categories">
<?php

function loop_tree($pages, $is_recursion = false)
{
?>
<ul class="<?= $is_recursion === true ? 'children' : 'parent' ?>">
<?php
foreach ($pages as $page) {
$children = false;
if (isset($page['children']) && !empty($page['children'])) {
$children = true;
}
?>
<li>
<?php if ($children === true) {
?>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<?php } else { ?>
<i class="fa fa-circle-o" aria-hidden="true"></i>
<?php } ?>
<a href="javascript:void(0);" data-categorie-id="<?= $page['id'] ?>" class="go-category left-side <?= isset($_GET['category']) && $_GET['category'] == $page['id'] ? 'selected' : '' ?>">
<?= $page['name'] ?>
</a>
<?php
if ($children === true) {
loop_tree($page['children'], true);
} else {
?>
</li>
<?php
}
}
?>
</ul>
<?php
if ($is_recursion === true) {
?>
</li>
<?php
}
}

loop_tree($home_categories);
?>
</div>

CSS:

Code:

div.filter-sidebar {
margin-bottom : 30px;
}
div.filter-sidebar .title, .title.alone {
font-size : 18px; line-height : 1; margin : 0 0 10px; padding : 0;
}
div.filter-sidebar .title span, .title.alone span {
border-bottom : 3px solid #8c0707; color : #666; display : inline-block; margin-bottom : -3px; padding-bottom : 10px;
}
div.filter-sidebar ul {
list-style : none; padding : 0px; z-index : 1;
}
div.filter-sidebar ul li, div.filter-sidebar ul li a {
margin-bottom : 1px;
}
div.filter-sidebar ul li a {
color : #6d6d6d; display : inline-block; font-size : 13px;
}
div.filter-sidebar ul li a.selected, div.filter-sidebar ul li a:hover {
color : #1e88e5;
}
div.filter-sidebar ul.children {
padding-left : 13px;
}
div.filter-sidebar ul.parent i, div.filter-sidebar ul.children i {
font-size : 10px;
}
div.filter-sidebar .title a.clear-filter, div.filter-sidebar .title i {
color : #666; float : right;
}


ul {
padding: 1em;
text-decoration: none;
color: #fff;
}

ul li ul {
background: #fafafa;
visibility: hidden;
opacity: 0;
min-width: 20rem;
position: relative;
transition: all 1s ease;
margin-top: 2rem;
left: 0;
display: none;
}

ul li:hover > ul, ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}

li:hover ul {
display: block;
position: absolute;
left: 90px;
top: 1;
}

li:hover>ul {
display: block;
margin: 0;
padding: 0 10px;
}

Thank you.

**EDIT: added code tags for readability. Poster: see https://forum.codeigniter.com/misc.php?a...help&hid=7 **