CSS и HTML-кодирование

Question

Я пытаюсь создать раскрывающееся меню подуровня. Я успешно получил первое меню, но второе меню торчит независимо от того, когда вы наводите указатель мыши на первое выпадающее меню. Я хочу, чтобы второй уровень отображался только при наведении указателя мыши на первый уровень. Любая помощь будет принята с благодарностью. Ниже мой HTML код:

HTML

<nav> 
    <ul> 
     <li><a href="#"><span></span> Home </a></li> 
     <li> 
     <a href="#"><span></span> Jwewlry </a> 
     <ul> 
      <li> 
       <a href="#"><span></span> Rings </a> 
       <ul> 
        <li><a href="#">Silver</a></li> 
        <li><a href="#">Copper</a></li> 
        <li><a href="#">Bronze</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><span></span> Pendants </a></li> 
      <li><a href="#"><span></span> Bracelets </a></li> 
      <li><a href="#"><span></span> Necklaces </a></li> 
      <li><a href="#"><span></span> Other </a></li> 
     </ul> 
     </li> 
     <li><a href="#"><span></span> Testimonials </a></li> 
     <li><a href="#"><span></span> Latest Offers </a></li> 
     <li><a href="#"><span></span> News </a></li> 
     <li><a href="#"><span></span> Contact Us </a></li> 
    </ul> 
</nav> 

CSS

nav { 
     /* Repeating background image */ 
    background: url(texture.png); 
    width: 210px; 
    margin: 20px; 
} 

nav ul { 
     /* Remove bullet points */ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

nav ul li { 
     /* Any child positioned absolutely will be positioned relative to this */ 
    position: relative; 
} 

nav ul li ul li ul li { 
    position: block; 
} 

nav a { 
    color: #e8e8e8; 
    padding: 12px 0px; 
     /* Fill all available horizontal space */ 
    display: block; 
     /* Remove underline */ 
    text-decoration: none; 
     /* New CSS3 animations: apply transition to background property, taking 1s to change it */ 
    transition: background 1s; 
    -moz-transition: background 1s; 
    -webkit-transition: background 1s; 
    -o-transition: background 1s; 
    font-family: tahoma; 
    font-size: 13px; 
    text-transform: uppercase; 
    padding-left: 20px; 
} 

nav a:hover { 
     /* RGBA background for transparancy: last number(0.05) is the transparency */ 
    background: RGBA(255,255,255,0.05); 
    color: #fff; 
} 

nav ul li:hover ul { 
     /* When list item is hovered, display UL nested within. */ 
    display: block; 
} 

nav ul ul { 
     /* Remove element from document flow */ 
    position: absolute; 
     /* Position relative to its parent <li> */ 
    left: 210px; 
    top: 0; 
    border-top: 1px solid #e9e9e9; 
    display: none; 
} 

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

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

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

nav span { 
    width: 12px; 
    height: 12px; 
    background: #fff; 
    display: inline-block; 
    float: left; 
    margin-top: 3px; 
    margin-right: 20px; 
    position: relative; 
    transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 

nav a:hover span { 
    background: #7d2c41; 
    transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
} 

/* Horizontal line */ 
nav span:before { 
    content: ""; 
    width: 12px; 
    height: 2px; 
    background: #3a3b3b; 
    position: absolute; 
    left: 0px; 
    top: 5px; 
} 

/* Vertical line */ 

nav span:after { 
    content: ""; 
    width: 2px; 
    height: 12px; 
    background: #3a3b3b; 
    position: absolute; 
    left: 5px; 
    position: top; 
}