Ich habe ein CSS-Dropdown-Navigationsmenü mit einem Untermenü. Mein Problem ist, dass das Untermenü geschlossen wird, bevor ich darauf klicke. Wenn ich den Cursor halb zum Untermenü bewege, verschwindet er. Wenn ich zum Beispiel meine Maus bewege, um auf "Item 3 sub 1.1" zu klicken, verschwindet sie.

Das Haupt-Dropdown-Menü funktioniert einwandfrei, aber das Untermenü ist das Problem.

Was kann ich tun, damit das Untermenü bleibt, bis ich darauf klicke? ... Danke für die Hilfe

Dies ist mein CSS für das Menü:

.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;
}

Das ist das 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>