• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1988
  • Last Modified:

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

  • 3
  • 2
1 Solution
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?
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now