CSS Multiple hover button issues

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 &amp; 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>

Answers

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

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

Need Your Help