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

Custom select with javascript and with parent div

javascript jquery html css twitter-bootstrap

i want create a custom select with javascript and css...I found this library that is very useful: http://silviomoreto.github.io/bootstrap-select/

Osmdroid, how to create a static overlayitem that remains at the center of the map

android map android-mapview osmdroid

I've searched high and low to find out how i can put an overlayitem that is not fixed to a GeoPoint (i.e geographical coordinates), but rather stays at a fixed point in the view (e.g. the center of...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.