Rozwijane, wielopoziomowe menu poziome

Question

Witam, mam zrobione rozwijane menu poziome i chciałbym dodać do niego jeszcze jeden poziom, ale wszystkie moje próby zawiodły. Czy byłby ktoś wytłumaczyć mi, jak to zrobić? 

Kod HTML:

<div class="main_menu">
				<ol>
					<li><a href="#">OGÓLNIE O JAPONII</a>
						<ul>
							<li><a href="#">HISTORIA</a>
								<ul>
									<li><a href="#"></a>link1</li>
									<li><a href="#"></a>link2</li>
									<li><a href="#"></a>link3</li>
									<li><a href="#"></a>link4</li>
								</ul>
							</li>
							<li><a href="#">POŁOŻENIE</a></li>
							<li><a href="#">POLITYKA</a></li>
							<li><a href="#">GOSPODARKA</a></li>
						</ul>
					</li>
					<li><a href="#">MIASTA</a>
						<ul>
							<li><a href="#">TOKIO</a></li>
							<li><a href="#">JOKOHAMA</a></li>
							<li><a href="#">OSAKA</a></li>
							<li><a href="#">NAGOJA</a></li>
							<li><a href="#">SAPPRO</a></li>
						</ul>
					</li>
					<li style="font-weight: 900;"><a href="#">STRONA GŁÓWNA</a></li>					
					<li><a href="#">KULTURA I RELIGIA</a>
						<ul>
							<li><a href="#">OBYCZAJE</a></li>
							<li><a href="#">RELIGIA</a></li>
							<li><a href="#">JĘZYK</a></li>
							<li><a href="#">ANIME I HENTAI</a>
								<ul>
									<li><a href="#"></a>link1</li>
									<li><a href="#"></a>link2</li>
									<li><a href="#"></a>link3</li>
									<li><a href="#"></a>link4</li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">WIĘCEJ</a>
						<ul>
							<li><a href="#">CIEKAWOSTKI</a></li>
							<li><a href="#">SZTUKI WALKI</a>
								<ul>
									<li><a href="#"></a>link1</li>
									<li><a href="#"></a>link2</li>
									<li><a href="#"></a>link3</li>
									<li><a href="#"></a>link4</li>
								</ul>
							</li>
							<li><a href="#">KUCHNIA</a></li>
							<li><a href="#">ŚWIĘTA I FESTIWALE</a>
								<ul>
									<li><a href="#"></a>link1</li>
									<li><a href="#"></a>link2</li>
									<li><a href="#"></a>link3</li>
									<li><a href="#"></a>link4</li>
								</ul>
							</li>
							<li><a href="#">...W INTERNECIE</a></li>
						</ul>
					</li>
				</ol>
			</div>

i kod CSS:

ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 20px;
	height: 45px;
	line-height: 250%;
	display: inline-block;
}

ol a
{
	color: #AC1B00;
	text-decoration: none;
	display: block;
}

ol > li
{
	float: left;
	width: 199px;
	height: 50px;
	border-right: 1px dashed #FF0D00;
}

ol > li:first-child
{
	width: 198px;
	border-left: 1px dashed #FF0D00;
}

ol > li:hover
{
	background-color: #AC1B00;
}

ol > li:hover > a
{
	color: #FFB815;
}

ol > li > ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 45px;
	display: none;
}

ol > li:hover > ul
{
	display: block;
}

ol > li > ul > li
{
	background-color: #D02E10;
	border-bottom: 1px dashed #FF0D00;
	position: relative;
	z-index: 100;
}

ol > li > ul > li > a
{
	color: #FFB815;
}

ol > li > ul > li:hover
{
	background-color: #891500;
}

ol > li > ul > li:hover > a
{
	color: #E9563B;
}

 

Answer 1

Tak przeglądałem codepen.io i znalazłem dosyć fajny "skrawek" kodu napisany przez kogoś. Sam zobacz LINK. Chodzi mi tutaj szczególnie o element Menu 3 i po rozwinięciu element Sub Menu 2 THIS IS SO LONG [...]

Pozdrawiam :)

PS Nw czy dobrze zrozumiałem jeszcze jeden poziom