-1

ここでの問題は、リストのすべての要素をスペースではなく互いの真下に配置したいということです.1つのボタンに移動したときにすべてのliがポップアップするのではなく、対応するものだけが表示されます.お互いに。

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>

4

2 に答える 2

0

これは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;}
于 2013-08-22T19:44:43.480 に答える