Some menu items flicker and other diappear on hover - html

Question

I wrote the CSS code for a vertical dropdown navigation menu with a submenu that branches to the right of the dropdown menu items, such as "Item 3 sub 1.1" and "Item 3 sub 2.1" seen in my html below.
The main dropdown menu works fine but the submenu items flicker (up and down jerky movement) and others disappear when I hover over them with the mouse cursor. For example, Item 2 sub 2 stacks and disappears behind Item 2 sub 1 when I hover over the latter with the cursor.
What can I do to stop this jerky flicker effect ?... Thanks for the help
This is my CSS for the menu
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: #330066;
display: block;
}
li:hover ul {
position: fixed;
display: block;
}
li:hover li {
float: none;
}
li:hover a {
background: #330066;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
z-index: 200;
border-bottom:0;
right:0;
left:0;
}
li li:hover a {
position:relative;
display: block;
}
li li ul a {
border-left:1px solid #660000;
margin-top:-25px;
margin-bottom: 25px;
margin-left: 85px;
display: none;
}
li:hover li:hover ul li a:hover {
background: #660000;
margin-top:-25px;
margin-bottom:25px;
margin-left: 85px;
overflow: none;
display: none;
}
.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;
}
This is the html
<div class="nav" >
<ul class="drop-nav">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
<li > Item 2 sub 2</li>
</ul>
</li>
<li> Item 3
<ul>
<li> Item 3 sub 1 »
<ul>
<li> Item 3 sub 1.1</li>
<li> Item 3 sub 1.2</li>
<li > Item 3 sub 1.3</li>
</ul>
</li>
<li> Item 3 sub 2 »
<ul>
<li> Item 3 sub 2.1 </li>
<li> Item 3 sub 2.2 </li>
<li> Item 3 sub 2.3 </li>
</ul>
</li>
<li> Item 3 sub 3 </li>
<li> Item 3 sub 4 </li>
<li> Item 3 sub 5 </li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5
<ul>
<li> Item 5 sub 1 </li>
<li> Item 5 sub 2 </li>
</ul>
</div>