0

我正在重新设计我们的管理菜单（它目前是垂直的并且很长/令人困惑），所以我想做一个浓缩的水平菜单。我已经摆弄这个一个星期了，我正要扯掉我的头发。

这是您可以看到的版本：

带有 3 个子菜单的水平菜单

我的 CSS 可以在这里查看：

CSS 文件

只是一些怪癖，我不知道如何解决它们。我将在这里分别列出：

1级（主要按钮）很好

2级（蒂娜）看起来不错

第 3 级（蒂娜/库存），第 3 级选项在第 2 级选项之后。我如何让那些在 2 级的东西前面？理想情况下，我希望 3 级具有 #E4F683 的背景颜色和 #F6ED83 的悬停颜色（用于 Adjust On Hand、Component Report、Manage OOS）

第 4 级（客户/订单/Handpost），当您将鼠标悬停在第 2 级上时会显示第 4 级的内容……此时应该显示第 3 级，但在悬停之前应该隐藏第 4 级；与上述相同的问题是第 4 级落后于第 3 级。理想情况下，我想要#E0F574 的背景颜色和#AEC245 的悬停颜色（交易、运输、信用）

如果 3/4 级不超过 2 级，我真的不介意，但只是与他们排队 - 这将解决“后面/前面”问题，但我似乎无法弄清楚如何更改为让它这样工作

我还希望 2/3/4 级不要太高（我需要添加更多条目），但我似乎无法弄清楚如何更改我的 css 来解决这个问题

如果有人可以帮助我重新编写我的 CSS 以按照我真正想要的方式工作，我会......好吧，我不知道，给你一些 cookie 或其他东西！我看了又看这个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/

请到最后的 misc 菜单查看它的实际效果（由于 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 回答