CSS nested UL menus, 4 levels [closed] - css

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
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>Admin
<ul>
<li>Calendar Import
</li>
</ul>
</li>
<li>Inventory
<ul>
<li>Adjust On Hand
</li>
<li>Component Report
</li>
<li>Manage OOS
</li>
</ul>
</li>
<li>Marketing
<ul>
<li>Count Incomplete
</li>
<li>Send Promo Email
</li>
<li>Validate Emails
</li>
</ul>
</li>
<li>Miscellaneous
<ul>
<li>FNWL Calendar
</li>
</ul>
</li>
<li>Orders
<ul>
<li>All Un-Processed
</li>
<li>Hand Post Transaction
</li>
<li>View Test Order
</li>
</ul>
</li>
<li>Personnel
<ul>
<li>Timecard Activity
</li>
</ul>
</li>
<li>Products
<ul>
<li>Categories
</li>
<li>FO Data
</li>
<li>New Product Checklist
</li>
<li>Price Table
</li>
<li>Sizes/Weights/Prices
</li>
<li>Specials
</li>
</ul>
</li>
<li>Reports
<ul>
<li>Carts
</li>
</ul>
</li>
<li>Web Site
<ul>
<li>Page Text
</li>
</ul>
</li>
<li>Personalize Menu
</li>
</ul>
</li>
<li><span class="mainmenu">Customers</span>
<ul>
<li>Orders
<ul>
<li>All Un-Processed
</li>
<li>Hand Post
<ul>
<li>Transaction
</li>
<li>Shipping
</li>
<li>Credit
</li>
</ul>
</li>
<li>Processed/Not Printed
</li>
<li>Awaiting Mail Payment
</li>
<li>Awaiting PayPal
</li>
<li>On Account
</li>
<li>Process Credit
</li>
<li>Search
</li>
<li>Search Order Notes
</li>
<li>Cancelled Orders
</li>
<li>Archived Orders
</li>
<li>Returns
</li>
<li>Damage Claims
</li>
<li>Outstanding RMAs
</li>
</ul>
</li>
<li>Customers
<ul>
<li>Email Customer
</li>
<li>Save Cart
</li>
<li>Database
</li>
<li>Search
</li>
<li>Search Emails
</li>
<li>Add
</li>
<li>Monthly Billing
</li>
<li>Set Non-HTML Status
</li>
<li>Combine Customer #s
</li>
<li>Chargebacks
</li>
<li>Prepaid Returns
</li>
</ul>
</li>
</ul>
</li>
<li><span class="mainmenu">Products</span>
<ul>
<li>New
<ul>
<li>Qualify Products
</li>
<li>Ingredient
</li>
<li>Non-Ingredient
</li>
<li>Price Table
</li>
<li>Non-Catalog
</li>
<li>Hidden
</li>
<li>New Product Checklist
</li>
</ul>
</li>
<li>Edit
<ul>
<li>Product
</li>
<li>Hidden
</li>
<li>Non-Catalog
</li>
<li>Sizes/Weights/Prices
</li>
<li>FO Data
</li>
<li>Pthalate/Vanillin
</li>
<li>Hide
</li>
</ul>
</li>
<li>Delete
<ul>
<li>Catalog
</li>
<li>Hidden
</li>
<li>Non-Catalog
</li>
</ul>
</li>
<li>Price Table
<ul>
<li>Manage
</li>
<li>Edit
</li>
<li>FO/CFO Check
</li>
<li>FO/CFO Catalog Price Check
</li>
</ul>
</li>
<li>Organic
<ul>
<li>Products
</li>
<li>Edit
</li>
</ul>
</li>
<li>Inventory
<ul>
<li>View OOS w/Sizes
</li>
<li>View OOS Products
</li>
<li>Manage OOS
</li>
<li>OOS Log
</li>
<li>Adjust On Hand
</li>
<li>Component Report
</li>
<li>By Vendor
</li>
<li>Vendor Receive Log
</li>
<li>By Category
</li>
</ul>
</li>
<li>Miscellaneous
<ul>
<li>Search Criteria
</li>
<li>Edit MSDS/Spec Sheet
</li>
<li>List MSDS/Spec Files
</li>
<li>Saponification Values
</li>
<li>Missing Images
</li>
<li>Upload Image
</li>
</ul>
</li>
<li>Specials
</li>
<li>Categories
</li>
<li>Clearance
</li>
<li>Extra Products
</li>
<li>On Order
</li>
</ul>
</li>
<li><span class="mainmenu">Warehouse</span>
<ul>
<li>Orders Shipped
</li>
<li>Shipping Charges
</li>
<li>Manage Receiving
</li>
<li>Products Needed
</li>
<li>Samples Received
</li>
</ul>
</li>
<li><span class="mainmenu">Marketing</span>
<ul>
<li>Promotional Emails
<ul>
<li>Validate Emails
</li>
<li>Send Promo Email
</li>
<li>Count Incomplete
</li>
<li>Search Mailing List
</li>
</ul>
</li>
</ul>
</li>
<li><span class="mainmenu">Web Site</span>
<ul>
<li>Page Text
</li>
</ul>
</li>
<li><span class="mainmenu">Reports</span>
<ul>
<li>Orders
<ul>
<li>Carts
</li>
</ul>
</li>
</ul>
</li>
<li><span class="mainmenu">Miscellaneous</span>
<ul>
<li>FNWL Calendar
<ul>
<li>Test Calendar
</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 :)

Answer 2

You may want to use relative and absolute positioning to move your sub-items and enable z-index to have them on top/below one another.
Here's an example of a mega menu I've used; take a look at how they display the sub items. It doesn't have more than one sub item, but the concept is the same. You may even want to use it to have all your sub items together, rather than use sub-sub items:
http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html