CSS multi-level drop-down menu doesn't work - html

Question

I'm trying to build multi-level CSS dropdown. I found a simple demo code and tried to edit but when I customized the third level of dropdown it became broken. I'm hoping to use <div> instead of <ul><li><a></a></li></ul> as I'd like to put multiple elements like <ul>, <li> and <p>. Below is the final image of the dropdown. If I hover Sub Menu 2 or Sub Menu 3, third level dropdown will appear next to each each <li> tag.
a {
text-decoration: none;
}
nav {
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center;
}
nav ul {
width: 100%;
}
/* first level */
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;
}
/* second level */
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;
}
/* hover effect for second level */
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;
}
/* thir level */
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;
}
/* hover effect for third level */
nav > ul > li > ul > li:hover > ul {
display: block;
z-index: 200;
}
nav > ul > li:hover ul >li:hover > a {
background: #009a9c;
color: #fff;
}
/* Second level arrow direction */
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;
}
/* Third level arrow direction */
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;
}
<nav>
<ul>
<li>menu 3
<ul>
<li>menu 3-1
<!-- original code I found -->
<!--<ul>
<li>menu 3-1-1</li>
</ul>-->
<!-- Want to customize like this -->
<div>
<p>Text</p>
<ul>
<li>Some menu</li>
</ul>
<ul>
<li>Some menu</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>

Answer 1

Your styles get overridden, for example:
/* first level */
nav ul li {
position: relative;
float: left;
width: 20%;
height: 40px;
background: #fff;
}
This style will affect all of your li elements, not just the first-level list items. You can use classes like class='first-level' or even the > operator for more specific elements selectors, like in the snippet below:
a {
text-decoration: none;
}
nav {
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center;
}
nav ul {
width: 100%;
}
/* first level */
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;
}
/* second level */
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;
}
/* hover effect for second level */
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;
}
/* thir level */
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;
}
/* hover effect for third level */
nav > ul > li > ul > li:hover > ul {
display: block;
z-index: 200;
}
nav > ul > li:hover ul >li:hover > a {
background: #009a9c;
color: #fff;
}
/* Second level arrow direction */
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;
}
/* Third level arrow direction */
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;
}
<nav>
<ul>
<li>menu 3
<ul>
<li>menu 3-1
<!-- original code I found -->
<!--<ul>
<li>menu 3-1-1</li>
</ul>-->
<!-- Want to customize like this -->
<div>
<div>Text</div>
<ul>
<li>Some menu</li>
</ul>
<ul>
<li>Some menu</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>