CSSで、3階層のドロップダウンメニューを作りたい

Question

CSSで、3階層のドロップダウンメニューを作ろうとしているのですが、上手くいきません。

下記のようなサンプルコードを見つけたのですが、<ul><li><a></a></li></ul>の部分を<div>に変更すると、動かなくなってしまいます。

サンプルコードURL:
https://codepen.io/Com2/pen/VLzXVy

<nav>
    <ul>
        <li><a href="#">menu 3</a>
            <ul>
                <li><a href="#">menu 3-1</a>
                    <!-- サンプルコードではこうなっている -->
                    <!--<ul>
                        <li><a href="#">menu 3-1-1</a></li>
                    </ul>-->
                    <!-- divに変えたい -->
                    <div>
                        <p>Text</p>
                        <ul>
                            <li><a href="#">Some menu</a></li>
                        </ul>
                        <ul>
                            <li><a href="#">Some menu</a></li>
                        </ul>           
                    </div>
                </li>               
            </ul>
	</li>				
    </ul>
</nav>

a {
	text-decoration: none;
}
nav {
	margin: 0 auto;
	width: 600px;
	height: 40px;
	text-align: center;
}
nav ul {
	width: 100%;
}
/* 親メニュー */
nav ul li {
	position: relative;
	float: left;
	width: 20%;
	height: 40px;
	background: #fff;
}
nav ul li a {
	display: block;
	line-height: 40px;
	color: #111;
}
nav ul li a:hover {
	background: #009a9c;
	color: #fff;
}
/* 子メニュー */
nav ul li ul {
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 0;
	width: 100%;
}
nav ul li ul li {
	overflow: hidden;
	width: 100%;
	height: 0;
	background: #43c6db;
}
nav ul li ul li a {
	display: block;
	color: #fff;
}
/* ホバーで子メニュー表示 */
nav > ul > li:hover > a {
	height: 40px;
	background: #009a9c;
	color: #fff;
}
nav > ul > li:hover li:hover > a {
	background: #009a9c;
}
nav ul li:hover > ul >li {
	overflow: visible;
	height: 40px;
}
/* 孫メニュー */
nav ul li ul li ul {
	top: 0;
	left: 100%;
}

nav ul li:last-child ul li ul {
	left: 100%;
}

nav ul li ul li ul li {
	width: 100%;
	background: #43c6db;
}
nav ul li ul li ul li a {
	display: block;
	color: #fff;
}
/* ホバーで孫メニュー表示 */
nav > ul > li > ul > li:hover > ul {
	display: block;
	z-index: 200;
}
nav > ul > li:hover ul >li:hover > a {
	background: #009a9c;
	color: #fff;
}
/* 子メニューがある場合下向き矢印を表示 */
nav > ul > li > ul:before {
	position: absolute;
	content: "";
	top: -20px;
	right: 16px;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top-color: #111;
}
nav > ul > li:hover > ul:before {
	border-top-color: #fff;
}
/* 孫メニューがある場合左右向き矢印を表示 */
nav ul li ul li ul:before {
	position: absolute;
	content: "";
	top: 16px;
	left: -20px;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-left-color: #fff;
}
nav ul li ul li:hover ul:before {
	border-left-color: #fff;
}
nav ul li:last-child ul li ul:before {
	position: absolute;
	content: "";
	top: 16px;
	left: 200%;
	margin-left: -20px;
	border: 5px solid transparent;
	border-right-color: #fff;
}
nav ul li:last-child ul li:hover ul:before {
	border-right-color: #fff;
}

理想は、この画像のような感じで、2階層目のドロップダウンメニューをhoverすると、そのナビの横に3階層目の<div>が現れることです。

どの部分を直したら、このような動きになるでしょうか。

Answer 1

cssの"li"を"div"に変えてください。
(3階層目だけ)

/* nav ul li ul li ul li */
nav ul li ul li ul div
/* nav ul li ul li ul li a */
nav ul li ul li ul div a 

ただ<ul>タグと<li>タグはセットで使うものです
今回の内容ですとオススメできない修正です。
(するとしても<li>の中に<div>を記載)