CSS Vertical Side Menu wtih Horizontal Submenu Popouts 3 Levels Help

I'm pulling my hair out trying to get my side menu to work properly.

See www.gormf.com. Notice that the background highlighting works fine for the top 2 items ("Anti-Fatigue Mats" & "Cow & Livestock Mats"), but then there is an extra space on the rest at the top 1-2 pixels, plus an extra 1 pixel space on only the bottom item.

My css coding is all over the place and I have no idea anymore. I need this to work across multiple platforms. Any help is much appreciated. See CSS & HTML coding below.

Let me know if you have any questions. Thanks in advance!

CSS Coding...
/* Left Content Area */
.Left a { color: #000; }
.Left ul { margin: 0; padding: 0;  z-index: 0; }
.Left li { clear: both; list-style: none; margin: 0; padding: 0; }
.Left li a { text-decoration: none; font-weight: bold; display: block; margin: 0; padding: 0; }
.Left #ProductHead { height: 34px; line-height: 34px; margin: 0 auto; padding: 0; }
.Left #ProductMenu { margin: 0; margin-bottom: 30px; padding: 0; }
.Left #ProductMenu li{ line-height: 26px; height: 26px; padding: 0; margin: 0; text-align: left; }
.Left #ProductMenu li a { padding: 0px 4px 0px 10px; text-align: left; margin: 0; }
.Left #ProductMenu ul ul { width: auto; position: relative; clear: left; top: -24px; left: 180px; visibility: hidden; text-align: left;
	background-color: #fff; padding: 0; z-index: 1; }
.Left #ProductMenu li ul li { clear: both; text-align: left; line-height: 26px; width: 100%; margin: 0; padding: 0; }
.Left #ProductMenu li ul li a { padding: 1px 20px 1px 10px; font-size: 0.9em; text-align: left; margin: 0;  width: 170px; height: auto; }
.Left #ProductMenu li:hover a, #ProductMenu li.over a{ text-decoration: underline; }
.Left #ProductMenu li ul li a, #ProductMenu li.over ul li a { text-decoration: none !important; }
.Left #ProductMenu li:hover ul, #ProductMenu li.over ul { visibility: visible; }
/* Holly Hack. IE Requirement \*/
* html #ProductMenu ul li { float: left; height: 1%; }
* html #ProductMenu ul li a { height: 1%; }
/* End */
HTML Coding...
<div class="Left" id="LayoutColumn1">
<div class="BlockHead" id="ProductHead">
<h6>Product Lines</h6></div>
<div class="BlockContent" id="ProductMenu">
<li><a href="anti-fatigue-mats/index.php" title="Help protect your worker's feet with our industrial anti fatigue mats">Anti-Fatigue Mats</a>
<ul><li><a href="anti-fatigue-mats/anti-static-matting/index.php" title="Protect delicate electronic equipment with anti-static mats">Anti-Static Matting</a></li>
<li><a href="anti-fatigue-mats/dry-area-mats/index.php" title="Protect delicate electronic equipment with anti-static mats">Dry Area Mats</a></li>
<li><a href="anti-fatigue-mats/kitchen-food-service-mats/index.php" title="Protect delicate electronic equipment with anti-static mats">Kitchen &amp; Food Service Mats</a></li>
<li><a href="anti-fatigue-mats/switchboard-matting/index.php" title="Protect delicate electronic equipment with anti-static mats">Switchboard Matting</a></li>
<li><a href="anti-fatigue-mats/welding-mats/index.php" title="Protect delicate electronic equipment with anti-static mats">Welding Mats</a></li>
<li class="LastChild"><a href="anti-fatigue-mats/wet-area-mats/index.php" title="Protect delicate electronic equipment with anti-static mats">Wet Area Mats</a></li></ul></li>
<li><a href="cow-livestock-mats/index.php" title="Livestock mats for cows and other farm animals">Cow &amp; Livestock Mats</a></li>
<li><a href="entrance-mats/index.php" title="Our custom commercial entrance mats provide a personal touch to your facility">Entrance Mats</a></li>
<li><a href="runner-mats/index.php" title="Our rubber runner mat rolls protect your floors">Runner Mats</a></li>
<li><a href="garage-floor-mats/index.php" title="Our garage floor mats &amp; flooring provide a safe clean environment to work off of">Garage Flooring</a></li>
<li><a href="rubber-gym-mats/index.php" title="Rubber gym mats help protect your floors from heavy weights">Gym &amp; Weight Room Mats</a></li>
<li><a href="horse-stall-mats/index.php" title="Horse stall mats &amp; flooring to protect your horses">Horse Stall Mats</a></li>
<li><a href="interlocking-mats/index.php" title="Interlocking mats are ideal for gyms with weight rooms">Interlocking Mats</a></li>
<li><a href="outdoor-rubber-mats/index.php" title="All purpose outdoor rubber floor mats for your facility">Outdoor Rubber Mats</a></li>
<li class="LastChild"><a href="rubber-floor-mats/index.php" title="General use, multipurpose rubber floor mats for your facility">Rubber Floor Mats</a></li>

Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brian WithunCommented:
The problem seems to be that the 1st box renders correctly, and EVERY OTHER box renders with whitespace at the bottom of it, just outside the border.  You had stated that the first two boxes are ok, when in fact they are not.

Also, the bottom box is not a unique case when you realize that the problem is whitespace BELOW the boxes, not on TOP of them.

This renders perfectly using Chrome, but I see the phantom gap when using IE.  I think you have stumbled upon a rendering error in IE.

I also notice that the first box, the one that renders properly, is the only box with a pop-up submenu.  I am looking into whether that has anything to do with it.
Brian WithunCommented:
The problem is definitely related to the existence of that floating sub-menu.

Put a sub-menu on any of the other products, and the bottom gap goes away for that product.
I'm calling it a bug in IE, and it will needed to be pared down to its simplest case to figure out where it is being introduced, and then figure a way to markup your page without encountering that bug.

that's all I have time for now, though.  Best of luck to you...
challengedAuthor Commented:
Maybe it will be fine then... I will have a submenu on every section so I will give it a go tonight and keep you posted.
challengedAuthor Commented:
The height issue was fixed by adding the height attribute in the following line:

.Left #ProductMenu li a { padding: 0px 4px 0px 10px; text-align: left; margin: 0; height: 26px; }

Even though height was specified for the "li" tag, I had to specify again for "li a" for IE.

There is still an annoying little rendering issue when i hover... the dotted line seperator gets distorted as you rollover. Any thoughts?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brian WithunCommented:
I don't see the rendering issue when I hover.  I'm using IE7.0 to look at it.  It still looks great using Chrome, too.

I did notice that the master product list has text-decoration = underline when I hover, whereas the submenu does not.

- Brian Herbert Withun
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.