CSS Vertical Side Menu wtih Horizontal Submenu Popouts 3 Levels Help

Posted on 2009-04-27
Medium Priority
Last Modified: 2012-05-06
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

Question by:challenged
  • 3
  • 2
LVL 13

Expert Comment

by:Brian Withun
ID: 24244903
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.
LVL 13

Expert Comment

by:Brian Withun
ID: 24245060
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...

Author Comment

ID: 24245111
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.

Accepted Solution

challenged earned 0 total points
ID: 24245581
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?
LVL 13

Expert Comment

by:Brian Withun
ID: 24247168
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question