CSS :Hover Selecting Too Many - html

Question

All, I've searched around and I have a feeling it's something simple. When hovering over any of my navigation items it displays all levels of my navigation bar. I have tried a couple of different ways to select but here is my CSS code.
div#topnav {
margin: -1px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
height: 21px;
background-color: #666;
border-bottom: 1px solid black;
}
div#topnav ul {
margin: 0;
padding: 0px;
background: #666;
text-align: left;
width: auto;
font-size: 10px;
font-weight: bold;
}
div#topnav li {
position: relative;
list-style: none;
margin: 0px;
padding: 3px 8px 2px 8px;
float: right;
border-left: 1px solid silver;
}
div#topnav li:hover {
background-color: #0038A8;
}
div#topnav li li.submenu:hover {
background-color: #0038A8;
}
div#topnav li a {
display: block;
padding: 0;
text-decoration: none;
width: auto;
color: white;
}
div#topnav li a:hover {
text-decoration: none;
}
div#topnav>ul a {
width: auto;
}
ul.level2 {
position: absolute;
width: 175px;
display: none;
border-top: 1px solid black;
}
div#topnav ul ul li {
float: left;
width: 158px;
border-bottom: 1px solid gray;
}
div#topnav ul.level2 {
top: 19px;
left: -1px;
margin-top: 2px;
font-weight: normal;
}
div#topnav ul.level3 {
top: -1px;
left: 174px;
border: 1px solid #000;
font-weight: normal;
}
ul.level1:hover > li ul.level2 {
display: block;
}
<div id="topnav" class="menu">
<ul class="level1">
<li>Item 1</li>
</ul>
<ul class="level1">
<li>Help
<ul class="level2">
<li>Email us</li>
<li>Call Us</li>
<li>Online Support</li>
<li>Forums</li>
</ul>
</li>
<li>Shopping
<ul class="level2">
<li>Shoes</li>
<li>Shirts</li>
<li>Pants</li>
</ul>
</li>
<li>Home</li>
</ul>
</div>
I have also put the CSS as a direct descendant but still had the same problem (Below is what I used).
ul.level1:hover > li ul.level2

Answer 1

Here a working fiddle : http://jsfiddle.net/7w68q1f4/
ul.level1 li:hover > ul.level2 {
display:block;}