CSS dropdown menu - 3rd level issue

Question

Ive got a 3 leve dropdown menu and the 3rd level sub-menu displays next to the 2nd level menu item like it should, except for a gap. The 2nd level is set to a width of 100px so I've absolutely positioned the 3rd level to top:0, left:100px so it displays to the right of the 2nd level, but there's a gap. If I change left:100px to left:97px there is no gap. Why is this?

The HTML:

<nav>
<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a>
        <ul>
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a>
                <ul>
                    <li><a href="#">Sub-Menu 4</a></li>
                    <li><a href="#">Sub-Menu 5</a></li>
                    <li><a href="#">Sub-Menu 6</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 5</a></li>
</ul>
</nav>

The CSS:

/* Initialise for 3 tiers */
nav ul, ul li ul, ul li ul li ul {
    margin:0;
    padding:0;
}

nav ul li, ul li ul li, ul li ul li ul li {
    list-style-type:none;
    float:left; 
}

/* Link Appearance for 3 tiers */
nav ul li a, ul li ul li a, ul li ul li ul li a {
    text-decoration:none;
    color:#fff;
    background:#666;
    padding:5px 10px;
    float:left; 
}

nav ul li a:hover, ul li ul li a:hover, ul li ul li ul li a:hover {
    background:#C00;
}

/* 2nd Tier */
nav ul li {
    position:relative;  
}

nav ul li > ul {
    display:none;
    position:absolute;
    top:30px;
    left:0;
    width:100px;    
}

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

/* 3rd Tier */ 
nav ul li ul li {
    position:relative;  
}

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

nav ul li ul li ul {
    display:none;
    position:absolute;
    top:0;
    left:100px;
}

JSFiddle

Answer 1

The issue is the gap between the menus. They need to be adjacent or even overlap for this hover trick to work.

So instead of specifying

left: 100px;

do something like

left: 100%; 
/* or even */
left: 99%; 

This will cause the 3rd layer to be adjacent to the second layer menu, or even overlap the second slightly (for 99%), allowing you to move the mouse without any interruptions that close the menu. And you won't have to worry about the width of the menus either.

Updated fiddle: http://jsfiddle.net/tqEfW/5/

If you want to keep the gap for the look of it, you can give the 3rd layer ul a padding:

nav ul li ul li ul {
    ....
    left: 100%;
    padding-left: 4px;
}

Ad demonstrated here: http://jsfiddle.net/tqEfW/9/

That said, from a UX point of view, menus with 3 layers are very hard to use and should be avoided when possible.

Answer 2

Its looks like you know how to solve it but your question is why this is happening.

Now in your code you put the width 100px to ul. but the li didn't have nay width. now both width is not same thing. width in ul is the width of this list area. And width in li means width of each individual list item. In your case your

  ul li a
  {
   padding: 5px 10px;
  }

now the padding of a do not full the full area. and you put the background color at ul li a so the much area its covering(not sure 'cover' is the appropriate word to mention it) its showing dark in back and around 3px left so its showing white.

If you put

  ul li a
  {
   padding: 5px 10.1px;
  }

You will see the li have no gap[#123] between levels of menu.

Instead of setting the background to ul li a if you set it to ul you can see there is no gap[#123]

#123 The actual white area is not gap. The ul is 100px but text including the padding of 10px in left and right not filling the total 100px. Its filling only 97px so when you are putting the width as 97px its showing no white area. But when it is 100px this showing the background on 97px as black and the rest 3px white which looks like a gap.

Answer 3

If you create CSS selectors like ul.first-level > li or ul.second-level > li it will only select the li that are inmediately after the ul with class first-level (or with class second-level, respectively).

In this way, without interating a lot of ul li ul li ul that can be really hard to read you can control the appearance of any complex nested list.

Answer 4

using percentage instead of pixel for this issue: try left:100% and check result

nav ul li ul li ul {
    display:none;
    position:absolute;
    top:0;
    left:100%;
}

Fiddle

also you don't need to write ul li ul li ul li a or like so.simply you can write:

ul ul ul a{
your CSS code
}