cześć wszystkim.
Proszę o pomoc - chce dodac 2 level submenu za pomoca ul itp jednak na pewno trzeba cos zmienić w style.css jednak podpowiedzcie proszę gdzie co i jak.
to samo chcę dodać w kolejnej stronie, jako kolejne elmenty podmenu.

screny pliku style.css oraz kodu html

<nav id="hb-nav" class="hb-nav">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hb-navigation" aria-expanded="false"> Toggle navigation </button> 
		Navigation

============================================= */
.hb-navigation {
padding: 0;
width: 100%;
float: left;
}

.hb-navigation ul {
list-style: none;
line-height: inherit;
}

.hb-navigation ul li {
position: relative;
line-height: inherit;
list-style-type: none;
}

.hb-navigation ul li a {
display: block;
cursor: pointer;
color: #2d2c40;
}

.hb-navigation ul li .sub-menu li a {
color: #2d2c40;
display: block;
}

.hb-navigation > ul {
width: 100%;
float: left;
list-style: none;
text-align: center;
line-height: inherit;
}

.hb-navigation > ul > li {
width: auto;
cursor: pointer;
padding: 40px 16px;
vertical-align: top;
display: inline-block;
text-transform: uppercase;
}

.hb-navigation > ul > li:hover .sub-menu {
top: 100px;
opacity: 1;
visibility: visible;
}

.hb-navigation > ul > li:hover .mega-menu {
top: 100px;
opacity: 1;
visibility: visible;
}

/* =============================================
Sub Menu
============================================= */
.sub-menu {
left: 0;
top: 150px;
opacity: 0;
background: #fff;
visibility: hidden;
position: absolute;
-webkit-box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.2);
margin: 0;
width: 240px;
padding: 10px 0;
}

.sub-menu li {
text-align: left;
padding: 10px 20px;
}

.sub-menu li a {
color: #2d2c40;
display: block;
}