Question

I’m re-designing our administration menu (its currently vertical and LONG/CONFUSING) so I wanted to do a condensed horizontal one instead. I’ve been fiddling with this for a week now and I’m about to rip my hair out.

Here is a version you can see:

Horizontal Menu with 3 submenus

My CSS can be viewed here:

CSS File

Just a few quirks and I can’t figure out how to fix them. I’ll list them here separately:

Level 1 (the main buttons) are fine

Level 2 (Tina) looks fine

Level 3 (Tina/Inventory), the 3rd level options are BEHIND the level 2 ones. How do I get those in front of the level 2 stuff ? Ideally, I’d like level 3 to have the background color of #E4F683 and a hover color of #F6ED83 (for the Adjust On Hand, Component Report, Manage OOS)

Level 4 (Customers/Orders/Handpost), the level 4 stuff shows up when you hover over level 2… at that point level 3 should show, but level 4 should be hidden until you hover; same problem as above in that level 4 is behind level 3. Ideally, I’d like the background color of #E0F574 and a hover color of #AEC245 (Transaction, Shipping, Credit)

I really wouldn’t mind if the level 3/4 weren’t over level 2, but just lined up with them – this would fix the “behind/front” issue, but I can’t seem to figure how what to change to make it work that way

I’d also like levels 2/3/4 to not be quite so high (there’s quite a few more entries that I need to add), but I can’t seem to figure out how to change my css to fix that

If someone could help me re-write my CSS to work how I really intend it to, I’ll… well, I dunno, send you some cookies or something! I’ve looked and looked at this CSS til I’m cross-eyed!

I tried to post images to make it clearer but the system won’t let me.

Mahalo!

Answer 1

I have created this Fiddle, removing all tables.

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 on:

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

Please go to the misc menu at the end to see it in action (due to the small screen of jsFiddle)

Please feel free to nick the HTML and CSS codes as seems to be working 🙂