CSS Multiple hover button issues - html

Question

The issue here being that I would like all of the elements from the list to be right below eachother instead of there being a space, and I don't want every li to pop-up when you move over 1 button, just the ones corresponding to each other.
CSS:
#uphead {list-style: none; font-weight: bold; font-size: 15px; padding: 5px 0px;}
#partnumbers {list-style-type: none;}
#partnumbers a {padding: 2px 10px; width: 220px; display:block;}
#partnumbers li {list-style-type: none; float: left; width: 220px;}
#partnumbers li ul {position: relative; padding: 10px 0px 10px 0px; float:left; z-index:20;}
#pn {display: none; background: url('../../../images/pn_box.png'); background-repeat: no-repeat; background-size: 200px 40px; height: 40px; width: 150px; position: relative; z-index: 20; margin: -40px 225px;}
#partnumbers:hover li ul li{display: block; padding: 10px 30px 0px; position: relative; z-index: 500; opacity: 0.9;}
.odd {background:#f4f3f0;}
.even {background:#eae9e6;}
HTML:
<div id="underpic">
<ul id="uphead">
<li>
iPhone 4 & 4s</li>
</ul>
<ul id="partnumbers">
<li>
<a class="even">MSR</a>
<ul>
<li id="pn">
LP4MS - PH4</li>
</ul>
</li>
<li>
<a class="odd">MSR, 1D Scanner</a>
<ul>
<li id="pn">
LP4 - PH4</li>
</ul>
</li>
<li>
<a class="even">MSR, 1D Scanner with Bluetooth</a>
<ul>
<li id="pn">
LP4BT - PH4</li>
</ul>
</li>
<li>
<a class="odd">MSR, 2D Code Scanner</a>
<ul>
<li id="pn">
LP4C2D - PH4</li>
</ul>
</li>
<li>
<a class="even">MSR, 2D Code Scanner with Bluetooth</a>
<ul>
<li id="pn">
LP4C2DBT - PH4</li>
</ul>
</li>
</ul>

Answer 1

Fix 1: Remove padding from #partnumbers li ul
Fix 2: Change #partnumbers:hover li ul li to #partnumbers li:hover ul li
I'll try and copy most of the styles I played with, but I might miss some, also I'm only using the firefox specific prefixes, you need to add all the browser prefixes you want to support:
#partnumbers {
list-style-type: none;
}
#partnumbers > li {
list-style-type: none;
position: relative;
width: 220px;
border: 1px solid #CECDCB;
}
#partnumbers a {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
padding: 2px 10px;
width: 100%;
}
#partnumbers li ul {
bottom: 0;
position: absolute;
right: 100%;
top: -7px;
z-index: 20;
}
#partnumbers li:hover ul li {
display: block;
opacity: 0.9;
padding: 10px 20px 10px 10px;
position: relative;
z-index: 500;
}
#pn {
background: url("http://www.metsales.com/MetropolitanSales/microsite/ipc/images/pn_box.png") no-repeat scroll 0 0 / 100% 100% transparent;
display: none;
position: relative;
white-space: nowrap;
z-index: 20;
}

Answer 2

This should be the CSS code...
#uphead {list-style: none; font-weight: bold; font-size: 15px; padding: 5px 0px;}
#partnumbers {list-style-type: none;}
#partnumbers a {padding: 2px 10px; width: 220px; display:block;}
#partnumbers li {list-style-type: none; float: left; width: 220px;}
#partnumbers li ul {position: relative; float:left; z-index:20;}
#pn {display: none; background: url('../../../images/pn_box.png'); background-repeat: no-repeat; background-size: 200px 40px; height: 40px; width: 150px; position: relative; z-index: 20; margin: -40px 225px;}
#partnumbers li:hover ul li{display: block; padding: 10px 30px 0px; position: relative; z-index: 500; opacity: 0.9;}
.odd {background:#f4f3f0;}
.even {background:#eae9e6;}