For some time now, I have been experimenting with CSS menus that have three levels, but unfortunately, I am struggling to get the layout exactly how I want it. The menu structure itself is simply a series of nested unordered lists within the HTML:
<ul id="menu">
<li>One</li>
<li>Two
<ul id="sub">
<li>Three
<ul id="subsub">
<li>Three One</li>
<li>Three Two</li>
</ul>
</li>
<li>Four</li>
</ul>
</li>
</ul>
The CSS for this can be found in this fiddle: http://jsfiddle.net/ckLAd/
My goal is to have the "One Two" items from the menu displayed as a horizontal menu bar (which is currently working fine), while the sub menu items "Three" and "Four" are perfectly aligned below "Two". However, at the moment, they seem slightly offset to the right. Additionally, when hovering over "Three", the subsub menu items "Three One" and "Three Two" should appear horizontally aligned with "Three," but justified to the right.
The alignment aspects are what I find confusing. Currently, the submenu is positioned using left: 3em; top: 0;, which feels a bit like a workaround. Are there better and more precise ways to achieve this?
Furthermore, how can I enhance the CSS, streamline it, and make it more concise?
On a related note, another menu I am working on initially appears transparent when the page loads (meaning the content shows through the li elements), but as soon as I scroll the page even slightly, the li elements become solid. When they are transparent, they also disappear if the li:hover state is not met for the parent ul. I haven't quite figured out what's causing this behavior yet.