Configure sub-sub vertical menu in CSS

Question

I have plagiarized ... < cough > ... borrowed some code to create a vertical menu for a web page I'm building. I have made the look and feel to my taste without too much trouble. The problem that I'm having is I cannot seem to get a sub-sub menu (third tier menu) to come up. The closest I've been able to accomplish is to get the slightest fraction of the sub-sub menu to appear to the right of the sub-menu's border by re-using the #nav li:hover ul.subs { CSS code, which I know I cannot. I feel my problem is with not having a complete understanding of how to code the #nav line(s) and which portions of the code I have to replicate down in order to accomplish the sub-sub menus.

Here is a link to my jfiddle of the code.

So, in short, what I'm looking for is:

• The first line of the #nav code for sub-sub block formatting
• What other code blocks are needed to make this work
• What do the lines with the GT symbol do ... ie: #nav li: hover > a {
• How does it actually work together (the css code, not the css3 portion)
• Any other tidbits which may be helpful.

I have looked at other posts such as this, but it didn't have what I needed, or at the very least, did not provide a very good explanation as to how or why something worked and what was needed to make it work. The page where this code came from does not have a satisfactory explanation as to how it works, either. The guys just said, add some extra code to make the sub-sub menus ... not very helpful. Also note, this is an attempt at a pure CSS3 vertical menu ... jQuery need not apply. Thanks in advance.

Answer 1

Updated code:

#nav,#nav ul {
    background-color: #8899AA;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    display: block;
    padding: 5px;
    position: relative;
    width: 112px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    -webkit-perspective: 200px;
    -o-perspective: 200px;
    perspective: 200px;
}
#nav ul {
    left: -9999px;
    opacity:0;
    padding: 5px;
    position: absolute;
    top: -9999px;

    -moz-transform: rotateY(70deg);
    -ms-transform: rotateY(70deg);
    -o-transform: rotateY(70deg);
    -webkit-transform: rotateY(70deg);
    transform: rotateY(70deg);
 
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
 
    -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
    -o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
    transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav li {
    background-color: #FFFFFF;
    position: relative;
}
#nav > li {
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#nav li a {
    background-color: #AABBCC;
    border-color: #DDDDDD #555555 #555555 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    display: block;
    font-size: 15px;
    padding: 8px 10px 8px 5px;
    text-decoration: none;
    width:95px;
 
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#nav li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
    color: #FFFFFF;
}
#nav li:hover > ul.subs {
    left: 112px;
    opacity:1;
    top: 0;
 
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
 
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
#nav ul li {
    width: 100%;
}

<div class="container">
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Menu 1</a>
			<ul class="subs">
				<li><a href="#">Submenu 1-1</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 1-1-1</a></li>
                        <li><a href="#">Submenu 1-1-2</a></li>
                        <li><a href="#">Submenu 1-1-3</a></li>
                        <li><a href="#">Submenu 1-1-4</a></li>
                    </ul>
                </li>
				<li><a href="#">Submenu 1-2</a></li>
				<li><a href="#">Submenu 1-3</a></li>
				<li><a href="#">Submenu 1-4</a></li>
				<li><a href="#">Submenu 1-5</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 2</a>
			<ul class="subs">
				<li><a href="#">Submenu 2-1</a></li>
				<li><a href="#">Submenu 2-2</a></li>
				<li><a href="#">Submenu 2-3</a></li>
				<li><a href="#">Submenu 2-4</a></li>
				<li><a href="#">Submenu 2-5</a></li>
				<li><a href="#">Submenu 2-6</a></li>
				<li><a href="#">Submenu 2-7</a></li>
				<li><a href="#">Submenu 2-8</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 3</a>
			<ul class="subs">
				<li><a href="#">Submenu 3-1</a></li>
				<li><a href="#">Submenu 3-2</a></li>
				<li><a href="#">Submenu 3-3</a></li>
				<li><a href="#">Submenu 3-4</a></li>
				<li><a href="#">Submenu 3-5</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
		<li><a href="#">Menu 6</a></li>
	</ul>
</div>

What I did :

• [HTML] Move your deepest <ul> inside its <li> parent (see my example)
• [CSS] Remove .subs1 and use .subs instead : then, we can threat all our sub(sub(sub(...)))menus the same way
• [CSS] Remove .subs1 CSS
• [CSS] Remove #nav ul { overflow: hidden; }, to avoid our submenus to be hidden (as they are on the left of their parent)
• [CSS] Change #nav li:hover ul.subs {} selector into #nav li:hover > ul.subs {}, to show only the first submenu when hovering an element
• [CSS] Change left: 114px into left: 112px to avoid getting a space between the element and its submenu (if you hover this space, you're not anymore hovering the element, then your submenu is hidden)

For your question, the > selector only target the direct children. Example :

<ul id="nav">
    <li>              <!-- #nav li [OR] #nav > li -->
        <ul>
            <li></li> <!-- #nav li [ONLY] -->
        </ul>
    </li>
</ul>