0

管理メニューを再設計しているので (現在は縦型で長い/混乱している)、代わりに凝縮された横型のメニューを作りたいと思っていました。私はこれを1週間いじっていて、髪を引き裂こうとしています.

これがあなたが見ることができるバージョンです：

3 つのサブメニューがある水平メニュー

私のCSSはここで見ることができます：

CSSファイル

いくつかの癖があり、それらを修正する方法がわかりません。ここにそれらを個別にリストします。

レベル 1 (メイン ボタン) は問題ありません

レベル2（ティナ）は元気そう

レベル 3 (Tina/Inventory)、3 番目のレベルのオプションはレベル 2 のオプションの後ろにあります。レベル 2 のものの前にそれらを取得するにはどうすればよいですか? 理想的には、レベル 3 には #E4F683 の背景色と #F6ED83 のホバー カラーを使用したいと考えています (手持調整、コンポーネント レポート、OOS の管理用)。

レベル 4 (Customers/Orders/Handpost)、レベル 2 にカーソルを合わせるとレベル 4 のものが表示されます。レベル 4 がレベル 3 の背後にあるという点で、上記と同じ問題です。理想的には、#E0F574 の背景色と #AEC245 (トランザクション、配送、クレジット) のホバー カラーが必要です。

レベル 3/4 がレベル 2 を超えていなくてもかまいませんが、それらと並んでいるだけです。これにより、「後ろ/前」の問題は修正されますが、何に変更すればよいかわかりません。そのように動作させる

また、レベル 2/3/4 があまり高くないようにしたいのですが (追加する必要のあるエントリがかなりあります)、CSS を変更してそれを修正する方法がわかりません。

誰かが私の CSS を書き直して、私が実際に意図したとおりに機能するようにするのを手伝ってくれたら、私は...まあ、わかりませんが、クッキーか何かを送ります! 私は斜視になるまで、この CSS を何度も見てきました。

より明確にするために画像を投稿しようとしましたが、システムが許可しません。

マハロ！

4

2 に答える 2

1

このフィドルを作成し、すべてのテーブルを削除しました。

HTML:

<ul id="tinamenu">
<li><span class="mainmenu">Tina</span>

    <ul>
        <li><a href="#">Admin</a>

            <ul>
                <li><a href="/Other/importcal.asp">Calendar Import</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Inventory</a>

            <ul>
                <li><a href="/Inventory/InventoryAdj.asp">Adjust On Hand</a>

                </li>
                <li><a href="/Inventory/InventoryItems.asp">Component Report</a>

                </li>
                <li><a href="/warehouse/backorder.asp">Manage OOS</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Marketing</a>

            <ul>
                <li><a href="Javascript:OnClick=openWin('/email/CountIncomplete.asp','450','250','lefttosend')">Count Incomplete</a>

                </li>
                <li><a href="/Email/email-Reset-promo.asp">Send Promo Email</a>

                </li>
                <li><a href="/Email/email-CheckOne.asp">Validate Emails</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Miscellaneous</a>

            <ul>
                <li><a href="http://www.google.com/calendar/">FNWL Calendar</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Orders</a>

            <ul>
                <li><a href="/">All Un-Processed</a>

                </li>
                <li><a href="/Orders/hand-post.asp">Hand Post Transaction</a>

                </li>
                <li><a href="/orders/vieworder.asp?orderid=15516913">View Test Order</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Personnel</a>

            <ul>
                <li><a href="/Reports/timecard.asp">Timecard Activity</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Products</a>

            <ul>
                <li><a href="/Other/ManageCat.asp">Categories</a>

                </li>
                <li><a href="/products/list-fodata.asp">FO Data</a>

                </li>
                <li><a href="/products/statusreport.asp">New Product Checklist</a>

                </li>
                <li><a href="/Other/ManagePriceTable.asp">Price Table</a>

                </li>
                <li><a href="/Products/confprices.asp">Sizes/Weights/Prices</a>

                </li>
                <li><a href="/SpecialsNew/">Specials</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Reports</a>

            <ul>
                <li><a href="/Reports/CartCount.asp">Carts</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Web Site</a>

            <ul>
                <li><a href="/Other/ManagePageText.asp">Page Text</a>

                </li>
            </ul>
        </li>
        <li><a href="/personalize.asp">Personalize Menu</a>

        </li>
    </ul>
</li>
<li><span class="mainmenu">Customers</span>

    <ul>
        <li><a href="#">Orders</a>

            <ul>
                <li><a href="/">All Un-Processed</a>

                </li>
                <li><a href="#">Hand Post</a>

                    <ul>
                        <li><a href="/Orders/hand-post.asp">Transaction</a>

                        </li>
                        <li><a href="/Orders/hand-post-ship.asp">Shipping</a>

                        </li>
                        <li><a href="/Orders/hand-post-credit.asp">Credit</a>

                        </li>
                    </ul>
                </li>
                <li><a href="/menu.asp?ToPrint=0">Processed/Not Printed</a>

                </li>
                <li><a href="/menu.asp?MailPay=0">Awaiting Mail Payment</a>

                </li>
                <li><a href="/menu.asp?PayPalPay=0">Awaiting PayPal</a>

                </li>
                <li><a href="/menu.asp?OnAccount=0">On Account</a>

                </li>
                <li><a href="/warehouse/process-credit.asp?function=1">Process Credit</a>

                </li>
                <li><a href="/Orders/searchorder.asp">Search</a>

                </li>
                <li><a href="/Orders/searchnotes.asp">Search Order Notes</a>

                </li>
                <li><a href="/Orders/del-report1.asp">Cancelled Orders</a>

                </li>
                <li><a href="/Orders/vieworderhist.asp">Archived Orders</a>

                </li>
                <li><a href="/warehouse/returns-view.asp?type=0">Returns</a>

                </li>
                <li><a href="/DamageClaims/">Damage Claims</a>

                </li>
                <li><a href="/Orders/rmalist.asp">Outstanding RMAs</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Customers</a>

            <ul>
                <li><a href="/emailcustomer.asp">Email Customer</a>

                </li>
                <li><a href="/Orders/viewunfinished.asp">Save Cart</a>

                </li>
                <li><a href="/Orders/custlist.asp">Database</a>

                </li>
                <li><a href="/Orders/searchcustomer.asp">Search</a>

                </li>
                <li><a href="/searchemail.asp">Search Emails</a>

                </li>
                <li><a href="/Orders/ct_input.asp">Add</a>

                </li>
                <li><a href="/Reports/billing.asp">Monthly Billing</a>

                </li>
                <li><a href="Javascript:OnClick=openWin('https://www.naturalsourcing.com/admin/email/SetNoHtml.asp','450','250','NoHTML')">Set Non-HTML Status</a>

                </li>
                <li><a href="/Orders/combine-cust.asp">Combine Customer #s</a>

                </li>
                <li><a href="/chargeback/default.asp">Chargebacks</a>

                </li>
                <li><a href="/CallTags/CallTaglist.asp">Prepaid Returns</a>

                </li>
            </ul>
        </li>
    </ul>
</li>
<li><span class="mainmenu">Products</span>

    <ul>
        <li><a href="#">New</a>

            <ul>
                <li><a href="/ProductQual/">Qualify Products</a>

                </li>
                <li><a href="/Products/add-product.asp">Ingredient</a>

                </li>
                <li><a href="/Products/add-product.asp?non=1">Non-Ingredient</a>

                </li>
                <li><a href="/Products/add-fo.asp">Price Table</a>

                </li>
                <li><a href="/noncatalog/add-product.asp">Non-Catalog</a>

                </li>
                <li><a href="/Hidden/add-product.asp">Hidden</a>

                </li>
                <li><a href="/products/statusreport.asp">New Product Checklist</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Edit</a>

            <ul>
                <li><a href="/products/edit-product.asp">Product</a>

                </li>
                <li><a href="/Hidden/edit-product.asp">Hidden</a>

                </li>
                <li><a href="/noncatalog/edit-product.asp">Non-Catalog</a>

                </li>
                <li><a href="/Products/confprices.asp">Sizes/Weights/Prices</a>

                </li>
                <li><a href="/products/list-fodata.asp">FO Data</a>

                </li>
                <li><a href="/products/CheckPthalate.asp">Pthalate/Vanillin</a>

                </li>
                <li><a href="/Products/HideProd.asp">Hide</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Delete</a>

            <ul>
                <li><a href="/Products/DeleteProd.asp">Catalog</a>

                </li>
                <li><a href="/Hidden/delete-product.asp">Hidden</a>

                </li>
                <li><a href="/noncatalog/delete-product.asp">Non-Catalog</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Price Table</a>

            <ul>
                <li><a href="/Other/ManagePriceTable.asp">Manage</a>

                </li>
                <li><a href="/Products/Edit-Product-Pricetable.asp?menu=1">Edit</a>

                </li>
                <li><a href="/Products/CheckCFO-FOData.asp">FO/CFO Check</a>

                </li>
                <li><a href="/Products/fo-cfopricecheck.asp">FO/CFO Catalog Price Check</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Organic</a>

            <ul>
                <li><a href="/OrganicProducts/">Products</a>

                </li>
                <li><a href="/products/edit-product-organic.asp">Edit</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Inventory</a>

            <ul>
                <li><a href="/warehouse/viewback.asp">View OOS w/Sizes</a>

                </li>
                <li><a href="/warehouse/viewbacksummary.asp">View OOS Products</a>

                </li>
                <li><a href="/warehouse/backorder.asp">Manage OOS</a>

                </li>
                <li><a href="/warehouse/viewbackorderlog.asp">OOS Log</a>

                </li>
                <li><a href="/Inventory/InventoryAdj.asp">Adjust On Hand</a>

                </li>
                <li><a href="">Component Report</a>

                </li>
                <li><a href="/Inventory/InventorybyVendor.asp">By Vendor</a>

                </li>
                <li><a href="/Inventory/InventorybyVendor-reclog.asp">Vendor Receive Log</a>

                </li>
                <li><a href="/Inventory/InventorybyCategory.asp">By Category</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Miscellaneous</a>

            <ul>
                <li><a href="/Products/addsearch.asp">Search Criteria</a>

                </li>
                <li><a href="/Products/Edit-MSDS.asp">Edit MSDS/Spec Sheet</a>

                </li>
                <li><a href="/PRODUCTS/listmsds.asp">List MSDS/Spec Files</a>

                </li>
                <li><a href="/Sapon/default.asp">Saponification Values</a>

                </li>
                <li><a href="/Products/noimage.asp">Missing Images</a>

                </li>
                <li><a href="Javascript:OnClick=openWin('/imagezip.asp','450','110','imagezip')">Upload Image</a>

                </li>
            </ul>
        </li>
        <li><a href="/SpecialsNew/">Specials</a>

        </li>
        <li><a href="/Other/ManageCat.asp">Categories</a>

        </li>
        <li><a href="/warehouse/ClearanceItemProcess.asp">Clearance</a>

        </li>
        <li><a href="/warehouse/ExtraProductsList.asp">Extra Products</a>

        </li>
        <li><a href="/Products/ProductsOnOrder.asp">On Order</a>

        </li>
    </ul>
</li>
<li><span class="mainmenu">Warehouse</span>

    <ul>
        <li><a href="/reports/shiplog_in.asp">Orders Shipped</a>

        </li>
        <li><a href="/warehouse/process-ship.asp?function=1">Shipping Charges</a>

        </li>
        <li><a href="/warehouse/Receiving.asp">Manage Receiving</a>

        </li>
        <li><a href="/ProdNeeded/default.asp">Products Needed</a>

        </li>
        <li><a href="/Samples/default.asp">Samples Received</a>

        </li>
    </ul>
</li>
<li><span class="mainmenu">Marketing</span>

    <ul>
        <li><a href="#">Promotional Emails</a>

            <ul>
                <li><a href="/Email/email-CheckOne.asp">Validate Emails</a>

                </li>
                <li><a href="/Email/email-Reset-promo.asp">Send Promo Email</a>

                </li>
                <li><a href="Javascript:OnClick=openWin('/email/CountIncomplete.asp','450','250','lefttosend')">Count Incomplete</a>

                </li>
                <li><a href="/email/SearchPromo.asp">Search Mailing List</a>

                </li>
            </ul>
        </li>
    </ul>
</li>
<li><span class="mainmenu">Web Site</span>

    <ul>
        <li><a href="/Other/ManagePageText.asp">Page Text</a>

        </li>
    </ul>
</li>
<li><span class="mainmenu">Reports</span>

    <ul>
        <li><a href="#">Orders</a>

            <ul>
                <li><a href="/Reports/CartCount.asp">Carts</a>

                </li>
            </ul>
        </li>
    </ul>
</li>
<li><span class="mainmenu">Miscellaneous</span>

    <ul>
        <li><a href="http://www.google.com/calendar/" target="_blank">FNWL Calendar</a>

            <ul>
                <li><a href="http://www.google.com/calendar/" target="_blank">Test Calendar</a>
                </li>
            </ul>
        </li>
    </ul>
</li>

CSS と HTML:

http://jsfiddle.net/andyjh07/cKnKL/

最後にその他のメニューに移動して、動作を確認してください (jsFiddle の画面が小さいため)。

動作しているように見えるので、HTML と CSS コードに自由にニックネームを付けてください:)

于 2013-01-22T21:37:41.900 に答える
0

相対位置と絶対位置を使用してサブアイテムを移動し、z-index を有効にしてそれらを上下に配置することができます。

これは、私が使用したメガ メニューの例です。サブアイテムの表示方法を見てみましょう。複数のサブ項目はありませんが、コンセプトは同じです。サブサブアイテムを使用するのではなく、すべてのサブアイテムをまとめて使用することもできます。

http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html

于 2013-01-22T21:11:49.523 に答える