Eu tenho um menu de navegação suspensa CSS com um submenu. Meu problema é que o submenu fecha antes de eu clicar nele. Quando movo o cursor até a metade do submenu, ele desaparece. Por exemplo, quando movo o mouse para clicar em "Item 3 sub 1.1", ele desaparece.

O menu suspenso principal funciona bem, mas o submenu é o problema.

O que posso fazer para que o submenu permaneça até clicar nele? ... Obrigado pela ajuda

Este é o meu CSS para o menu:

.nav {
    padding: 0px;
    text-align: center;
    border: 0px;
    vertical-align: middle;
    display: table-row;
    width: 100%;
    margin: 0px auto;
    background-color:#660000;
    overflow: hidden;
    position:relative;
    height: 30;
    text-align: center;
    margin: 0px auto 0px auto;
}
ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    float:left;
    display:inline;
}
ul li {
    display:block;
    position: relative;
    float: left;
    left: 85px;
}
li ul {
    display: none;
    margin:0;
}
ul li a {
    display: block;
    background: #660000;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    border-left:1px solid #660000;
    border-right:1px solid #660000;
}
ul li a:hover {
    background: #3300cc;
    display: block;
}
li:hover ul {
    position: fixed;
    display: block;
}
li:hover li {
    float: none;
}
li:hover a {
    background: #3300cc;
}
li:hover li a:hover {
    background: #660000;
}
.drop-nav li ul li {
    border-top: 0px;
    z-index: 100;
    border-bottom:0;
    right:0;
    left:0;
}
li li:hover a {
    display: block;
}
li li ul a {
    margin-top:-25px;
    margin-bottom: 25px;
    margin-left: 85px;
    display: none;
}
li:hover li:hover ul li a:hover {
    margin-top:-25px;
    margin-bottom:25px;
    margin-left: 85px;
    overflow: none;
}

Este é o html:

<div class="nav" >
<ul class="drop-nav">
<li><a href="item1.html">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul>
    <li><a href="item2_1.html">Item 2 sub 1</a></li>
    <li><a href=" item2_2.html"> Item 2 sub 2</a></li>
    <li ><a href=" item2_3.html"> Item 2 sub 2</a></li>
  </ul>
</li>
<li><a href="#"> Item 3</a>
  <ul>
    <li><a href="#"> Item 3 sub 1 &raquo;</a>
      <ul>
        <li><a href=" item3_1_1.html"> Item 3 sub 1.1</a></li>
        <li><a href=" item3_1_2.html"> Item 3 sub 1.2</a></li>
        <li ><a href=" item3_1_3.html"> Item 3 sub 1.3</a></li>
      </ul>
    </li>
    <li><a href="#"> Item 3 sub 2 &raquo;</a>
      <ul>
        <li><a href=" item3_2_1.html"> Item 3 sub 2.1 </a></li>
        <li><a href=" item3_2_2.html"> Item 3 sub 2.2 </a></li>
        <li><a href=" item3_2_3.html"> Item 3 sub 2.3 </a></li>
      </ul>
    </li>
    <li><a href=" item3_3.html"> Item 3 sub 3 </a></li>
    <li><a href=" item3_4.html"> Item 3 sub 4 </a></li>
    <li><a href=" item3_5.html"> Item 3 sub 5 </a></li>
  </ul>
</li>
</ul>
</div>