CSS, Help adding sub menu to drop down menu - html

Question

I'm trying to add a "sub menu" to a drop down menu. Say I wanted to add a sub menu to Item 3 (see html), how would I go about doing that?
Thanks,
Here's my CSS:
.nav_menu {
width:100%;
background-color:#EFEFEF;
z-index:2000;
border:1px solid #ccc;
}
.selected {
background-color:#ccc;
color:#333;
}
.nav_menu a:link {
color:#007dc1;
}
.nav_menu a:visited {
color:#007dc1;
}
.nav_menu a:hover {
color:#007dc1;
}
.nav_menu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
.nav_menu ul li {
font-size:16px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 8px 22px;
font-weight:600;
transition: all 50ms linear;
transition-delay: 0s;
}
.nav_menu ul li ul {
padding: 0;
position: absolute;
top: 37px;
left: 0;
width: 230px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
display: block;
opacity: 0;
-webkit-transition: opacity .2s;
z-index:50000;
}
.nav_menu ul li ul li {
background-color:#535353;
border-top:1px solid #fff;
display: block;
font-size:12px;
color:#fff;
}
.nav_menu ul li ul li:hover {
background: #B2B2B2;
}
.nav_menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Here's my HTML:
<ul>
<li>All Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 with Sub Menu</li>
</ul>
</li>
</ul>

Answer 1

Firstly, since your menu is based simply on the CSS :hover pseudo-class, make sure that your ul and li elements do not have any space between them, because this will lead to the entire menu dissapearing.
The HTML code
<div class='nav_menu'>
<ul>
<li>All Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class='nav_menu_sub'>Item 3 with Sub Menu
<ul>
<li>SubItem 3.1</li>
<li>SubItem 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Just like the drop down that you already provided, simply adding a ul element within the li element should suffice to create the sub menu. I added a nav_menu_sub class to the li that opens the sub menu making it easier to select via CSS (avoiding .nav_menu ul li ul li).
The CSS code
.nav_menu_sub {
padding:0;
margin:0;
}
.nav_menu_sub ul {
margin-top:-7px;
display: none !important;
}
.nav_menu_sub:hover ul {
display: block !important;
opacity: 1;
visibility: visible;
}
The margin-top:-7px on the ul element was added to ensure that it fits nicely up against the li.
Add the !important to the display attribute to get it overwrite the previously declared styling.
Working jsFiddle: http://jsfiddle.net/akhrbkug/

Answer 2

Judging from the css you posted:
.nav_menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
It looks like you have to add another ul in the submenu li:
<ul>
<li class='nav-menu'>All Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 with Sub Menu
<ul>
<li>SubItem 3.1</li>
<li>SubItem 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Fiddle for the demo
http://jsfiddle.net/ee9ebv2s/