CSS Vertical Side Menu wtih Horizontal Submenu Popouts 3 Levels Help

Posted on 2009-04-27
Last Modified: 2012-05-06
I'm pulling my hair out trying to get my side menu to work properly.

See 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
    LVL 13

    Expert Comment

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

    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

    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
    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

    Course: CSS Specialist

    We don’t have to sell you on the idea of becoming a developer. If you’re you here, you already know it’s one of the most lucrative (and fastest growing) career tracks out there. It’s CSS that allows you to set yourself apart from other web and mobile developers.

    Join & Write a Comment

    Suggested Solutions

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    729 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now