Question

我正在重新设计我们的管理菜单（当前是垂直的和LONG / CONFUSING）所以我想做一个浓缩的水平菜单。我已经花了一个星期的时间来摆弄这个，而且我要把头发撕掉。

以下是您可以看到的版本：

Horizontal Menu with 3 submenus

我可以在这里查看我的CSS：

CSS File

只是一些怪癖，我无法弄清楚如何修复它们。我将在这里单独列出：

等级1（主按钮）很好

2级（Tina）看起来不错

3级（Tina / Inventory），第3级选项位于2级。我怎样才能获得2级前的东西？理想情况下，我喜欢3级的背景颜色为＃E4F683，悬停颜色为＃F6ED83（适用于现场调整，组件报告，管理OOS）

等级4（顾客/订单/手柄），当您将鼠标悬停在等级2上时，等级4的东西会出现...等级3应该显示，但等级4应该隐藏，直到您悬停;同样的问题，因为第4级落后于第3级。理想情况下，我喜欢＃E0F574的背景颜色和＃AEC245的悬停颜色（交易，运输，信用）

如果等级3/4不超过2级，我真的不会介意，但只是排好他们 - 这将解决＆＃34;背后/前线＆＃34;问题，但我似乎无法确定如何改变以使其以这种方式工作

我也喜欢2/3/4级别不太高（我还需要添加更多条目），但我似乎无法想象如何更改我的CSS来解决这个问题

如果有人可以帮助我重新编写我的CSS来工作，我真的打算这样做，我会......好吧，我不知道，给你发送一些饼干或其他东西！我看了看这个CSS，直到我睁大眼睛！

我试图发布图片以使其更清晰，但系统不会让我。

马洛！

Answer 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＆amp; HTML on：

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

请到最后的misc菜单看看它的实际效果（由于jsFiddle的小屏幕）

请随意修改HTML和CSS代码似乎正常工作：）

Answer 2

您可能希望使用相对和绝对定位来移动子项并启用z-index使它们在彼此的顶部/下方。

这是我用过的一个大型菜单的例子;看看他们如何显示子项目。它没有多个子项，但概念是相同的。您甚至可能希望使用它将所有子项放在一起，而不是使用子子项：

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

CSS嵌套的UL菜单，4个级别

2 个答案: