Уровень 3 <nav> не скрывается, когда он должен

Question

Я поворачиваю 2 уровень <nav> на уровень 3 и сталкиваюсь с несколькими трудностями.

3-й уровень отображает, где и как прогнозировалось, но когда «дедушка» парит, а не родительский элемент, который я хочу отобразить.

Я некоторое время обманывал CSS, и я не могу заставить его ответить, как мне хотелось бы.

Любая помощь приветствуется.

Существует скрипка, поскольку мое объяснение может быть несколько недостающим.

http://jsfiddle.net/6TGaf/

код из скрипки:

#nav{ 
    background: #bada55; 
    width: 99%; 
    margin-top:-5px; 
} 

#nav ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    height: 40px; 
} 

#nav ul li{ 
    /*child elements positioned absolutley will be relative to this*/ 
    position: relative; 
    border-top: 1px solid #e9e9e9; 
    float: left; 

} 

#nav a{ 
    color: ghostwhite; 
    padding: 12px 0px; 
    /*fill hori space*/ 
    display: block; 
    text-decoration: none; 
/*apply transition to background property, taking 1s to change it 
*/ 
    transition:padding 1s, background 1s; 
    -moz-transition:padding 1s, background 1s; 
    -webkit-transition:padding 1s, background 1s; 
    -o-transition:padding 1s, background 1s; 

    font-family:tahoma; 

    font-size:13px; 
    text-transform:uppercase; 
    padding-left:20px; 
} 

/*hover pseduo class*/ 
#nav a:hover{ 
    /* 
    RGBA background for transparancy: 
    last number(0.05) is the transparency 
    */ 
    padding-left:35px; 
    background: RGBA(255,255,255,0.05); 
    color:#fff; 
} 

#nav ul li:hover ul{ 
    /*diplay when hovered*/ 
    display: block; 
} 

#nav ul ul{ 
    position: absolute; 
    left: 0px; 
    top: 40px; 
    border-top: 1px solid #e9e9e9; 
    display: none; 
    /*width: 304px;*/ 
    z-index: 1; 
} 

#nav ul ul li{ 
    width: 150px; 
    background: #f1f1f1; 
    border: 1px solid #e9e9e9; 
    border-top: 0; 
    /*float:left;*/ 

} 

#nav ul ul li a{ 
    color:#000000; 
    font-size:12px; 
    text-transform:none; 
} 

#nav ul ul li a:hover { 
    color:#929292; 
} 

/*3rd level...*/ 
#nav ul ul ul{ 
    position: absolute; 
    left: 150px; 
    top: 0px; 
    border-top: 1px solid #e9e9e9; 
    display: none; 
    /*width: 304px;*/ 
    z-index: 1; 
} 

#nav ul ul ul li{ 
    width: 150px; 
    background: #f1f1f1; 
    border: 1px solid #e9e9e9; 
    border-top: 0; 
} 

#nav ul ul ul li a{ 
    color:#000000; 
    font-size:12px; 
    text-transform:none; 
} 

#nav ul ul ul li a:hover { 
color:#929292; 
} 

#nav ul ul li:hover ul{ 
/*diplay when hovered*/ 
display: block; 
} 

<nav id = "nav"> 
    <ul> 
     <li> 
      <a href="#">1.1</a> 
      <ul> 
       <li> 
        <a href="#">1.1.1</a> 
        <ul> 
         <li><a href="#">1.1.1.a</a></li> 
         <li><a href="#">1.1.1.b</a></li> 
        </ul> 
       </li> 

       <li><a href="#">1.1.2</a></li> 
       <li><a href="#">1.1.3</a></li> 

      </ul> 
     </li> 
</ul> 

Answer 1

Изменить

#nav ul li:hover ul { 
    /*diplay when hovered*/ 
    display: block; 
} 

в

#nav ul li:hover>ul { 
    /*diplay when hovered*/ 
    display: block; 
} 

Обратите внимание на дополнительные ">"

Edit: Добавлено jsFiddler

Answer 2

просто добавить этот кусок кода будет работать для вас

#nav ul li:hover ul ul{ 
    /*diplay when hovered*/ 
    display: none; 
}