html - CSS 多个悬停按钮问题

Question

这里的问题是我希望列表中的所有元素都在彼此的正下方，而不是有一个空格，并且我不希望每个 li 在您移动 1 个按钮时弹出，只是对应的那些对彼此。

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>

Answer 1

修复 1：从#partnumbers li ul

修复 2：更改#partnumbers:hover li ul li为#partnumbers li:hover ul li

我会尝试复制我玩过的大部分样式，但我可能会错过一些，而且我只使用 firefox 特定的前缀，你需要添加所有你想要支持的浏览器前缀：

#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

这应该是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; 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;}