• 0

CSS Menu with transparency breaks in IE


Question

In short, I have a CSS menu, which supports multi-level menus (1st level is main menu thats always visible, 2nd level is dropdown menu of each main menu item, 3rd level would be pullout menu's from individual 2nd level items). If I remove the transparency, it works fine in IE (both 7 and 8), the second I add transparency back in, the 3rd level menus disappear (or in some way remain hidden).

Here is what I have for my HTML and CSS source:

default.css:

@charset "UTF-8";

/** 
 * NVIDIA CSS Drop-Down Menu Theme
 *
 * @file		default.css
 * @name		NVIDIA
 * @version		0.1
 * @type		transitional
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2008 Live Web Institute. All Rights Reserved.
 *
 * Module Classes: *.dir {} *.on {} *.open {} li.hover {} li.first {} li.last {}
 * Expected directory tag - li
 *
 */


/*------------------------------------------------------------------------------------------------------/
 * @section		Base Drop-Down Styling
 * @structure	ul (unordered list)
 *				ul li (list item)
 *				ul li a (links)
 *				*(.class|:hover)
 * @level sep	ul
 */


/* ----- ALL LEVELS (incl. first) */

ul.dropdown {
 font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
 text-transform: uppercase;
}

	ul.dropdown li {
	 padding: 7px 0;
	 background-color: #000;
	 color: #fff;
	 line-height: normal;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {

	}

	ul.dropdown a:link,
	ul.dropdown a:visited { color: #fff; text-decoration: none; }
	ul.dropdown a:hover { color: #76b900; text-decoration: none; }
	ul.dropdown a:active { color: #fff; }


/* ----- END LEVEL */


	/* ----- NON-FIRST LEVEL */

	ul.dropdown ul {
	 width: 100%;
	 background-color: #333;
	 color: #fff;
	 font-size: 11px;
	 text-transform: none;
	 filter: alpha(opacity=70);
	 -moz-opacity: .7;
	 KhtmlOpacity: .7;
	 opacity: .7;
	}

		ul.dropdown ul li {
		 background-color: transparent;
		 color: #fff;
		 filter: none;
		}

		ul.dropdown ul li.hover,
		ul.dropdown ul li:hover {
		 background-color: transparent;
		}

		ul.dropdown ul a:link,
		ul.dropdown ul a:visited { color: #fff; }
		ul.dropdown ul a:hover { color: #fff; text-decoration: none; }
		ul.dropdown ul a:active { color: #fff; }


/* ----- END LEVEL */



/*------------------------------------------------------------------------------------------------------/
 * @section	Support Class 'dir'
 * @level sep	ul, .class
 */
	ul.dropdown *.dir {
	 padding-right: 0px;
	 background-image: none;
	 background-position: 100% 50%;
	 background-repeat: no-repeat;
	}

		/* Non-first level */
		ul.dropdown ul *.dir {
		 padding-right: 0px;
		 background-image: url(images/nav-arrow-right.png);
		 background-position: 100% 50%;
		 background-repeat: no-repeat;
		}

		ul.dropdown ul ul *.dir {
		 background-image: url(images/nav-arrow-right2.png);
		}


	/* Components override */

	ul.dropdown-vertical *.dir {
	 background-image: url(images/nav-arrow-right.png);
	}

	ul.dropdown-vertical-rtl *.dir {
	 padding-right: 15px;
	 background-image: url(images/nav-arrow-left.png);
	 background-position: 0 50%;
	}

default.advanced.css:

@charset "UTF-8";

/** 
 * NVIDIA Advanced CSS Drop-Down Menu Theme
 *
 * @file		default.advanced.css
 * @name		NVIDIA
 * @version		0.1
 * @type		transitional
 * @browsers	Windows: IE5+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2008 Live Web Institute. All Rights Reserved.
 *
 */

@import "default.css";


ul.dropdown li a {
 display: block;
 padding: 7px 0px;
}


/* ------------- Override default */

	ul.dropdown li {
	 padding: 0;
	}


/* ------------- Reinitiate default: post-override activities  */

	ul.dropdown li.dir {
	 padding: 7px 20px 7px 14px;
	}

	ul.dropdown ul li.dir {
	 padding-right: 15px;
	}


/* ------------- Custom */

	ul.dropdown li {

	}

	ul.dropdown ul a {
	 padding: 4px 5px 4px 14px;
	 width: auto; /* Especially for IE */
	}

	ul.dropdown ul a:hover {
	 background-color: #76b900;
	}

	ul.dropdown a.open {
	 background-color: #2e2e2e;
	 color: #76b900;
	}

	ul.dropdown ul a.open {
	 background-color: #76b900;
	 color: #fff;
	}


	/* CSS 2.1 */

	ul.dropdown li:hover > a.dir {
	 background-color: #2e2e2e;
	 color: #76b900;
	}

	ul.dropdown ul li:hover > a.dir {
	 background-color: #76b900;
	 color: #fff;
	}

dropdown.css:

@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file		dropdown.css
 * @package		Dropdown
 * @version		0.7.1
 * @type		Transitional
 * @stacks		597-599
 * @browsers	Windows: IE6+, Opera7+, Firefox1+
 *				Mac OS: Safari2+, Firefox2+
 *
 * @link		http://www.lwis.net/
 * @copyright	2006-2008 Live Web Institute. All Rights Reserved.
 *
 */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;1
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
 width:100%;
 background-color:#000;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
 width:12.5%;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
 width:auto;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

helper.css:

* { margin: 0; padding: 0; }
body { padding: 0px; font: 14px/normal Tahoma, Arial, Helvetica, sans-serif; }
h1 { margin-bottom: .5em; border-bottom: solid 1px #d9d9d9; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 180%; text-indent: 5px; letter-spacing: -1px; }
cite { float: right; }
ul.classic { list-style: disc; margin-bottom: 1em; padding-left: 2em; }
div.section { clear: both; padding-top: 50px; }

.table1 { float: right; margin-bottom: 2em; border: solid 1px #eee; }
.table1 caption { color: #fff; text-align: center; padding-bottom: 5px; }
.table1 th, .table1 td { padding: 7px; }
.table1 th, .table1 thead td { background-color: lightyellow; color: #000; }
.table1 tbody td { background-color: #fff; color: #000; }
.table1 tbody th { text-align: right; }

#wmfg { clear: both; float: left; }

and finally, index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;html xmlns="http://www.w3.org/1999/xhtml">;head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HOMEPAGE</title>

<link href="MRSA_files/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="MRSA_files/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="MRSA_files/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
</head>
        <ul class="dropdown dropdown-horizontal">
        <li><a>Main Item 1</a>
            <ul>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
            </ul>
        </li>
        <li><a>Main Item 2</a>
            <ul>
                <li><a class="dir">Sub Item L2</a>
                	<ul>
                    	<li>Sub Item L3</li>
                        <li>Sub Item L3</li>
                        <li>Sub Item L3</li>
                        <li>Sub Item L3</li>
                        <li>Sub Item L3</li>
                        <li>Sub Item L3</li>
                        <li>Sub Item L3</li>
                    </ul>
                </li>

                <li>Sub Item L2</li>
                <li>Sub Item L2</li>
                <li>Sub Item L2</li>
                <li>Sub Item L2</li>
                <li>Sub Item L2</li>
                <li>Sub Item L2</li>
                <li>Sub Item L2</li>
                <li>Sub Item L2</li>
                <li>Sub Item L2</li>
            </ul>
        </li>
        <li><a>Main Item 3</a>
            <ul>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
            </ul>
        </li>
        <li><a>Main Item 4</a>
            <ul>
                <li>Sub Item L2</li>
            </ul>
        </li>
        <li><a>Main Item 5</a>
            <ul>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
            </ul>
        </li>
        <li><a>Main Item 6</a>
            <ul>
                <li><a>Sub Item L2</a></li>
                <li><a>Sub Item L2</a></li>
            </ul>
        </li>
        <li><a>Main Item 7</a>
            <ul>
                <li>Sub Item L2</li>
            </ul>
        </li>
        <li><a>Main Item 8</a>
            <ul>
                <li>Sub Item L2</li>
            </ul>
        </li>
      </ul>
</body>
</html>

Now, when I have the menu implemented into the site, I do not get any hint of any pullout menu to the right of the 2nd level items when I mouse over them.....but with just the menu on its own, it looks like its there, but simply not showing the full width.

I am almost positive now that it has something to do with the width of the Level 3 menu that should appear, but I do not know a ton of CSS so am mostly doing this by finding examples and modifying them to my needs, and I am growing tired of fighting this issue that happens only in IE. Normally, I would just say screw IE users, but in this particular case, IE users make up virtually all of the visitors, so I need to make it work properly for at least IE 7 and 8 (luckily IE6 is not a large part of users, so specific code for IE6 is not needed).

1 answer to this question

Recommended Posts

  • 0

Anyone have any thoughts on this? Been looking around but I cannot figure it out....it looks like the popout menu (level 3 menu items) act this way in IE because they do not have a position and/or size attribute, but I have tried adding position and size to just about everything and I cannot get it to work properly.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • It's just exactly what it looks like. The facial polygon count is low and rigid, and the background appears heavily blurred. You can clearly see jagged edges around the car window as it exits the tunnel. The character animations feel like they're from 2010. The Xbox Series S has performance similar to an RX 570 or GTX 1660, which is disappointing and contributes to holding back game development. The Switch GPU is roughly on par with a 2050 or 3050, which is even worse. Developers have often discussed the challenges and limitations of developing for outdated/low end hardware, noting how it can hold back progress. This isn't a new issue. I am sure we will hear about the "Challenges" they had to overcome here and sacrifices that had to be made for compatibility with the outdated/low end hardware.
    • Whether on Edge or Firefox, I don't get this prompt to accept cookies, because they're already whitelisted by the Cookie AutoDelete extension, both on Edge and Firefox. And, as I've already said, using Edge (yesterday), Neowin isn't whitelisted (I never use Edge), and I didn't get that pop-up. And this morning, after checking, still no pop-up, and everything is activated, the proof (screenshot), I have no ads on the right side. I must add that I block the following trackers Doubleclick, and Scorecardresearch, as well as a few other undesirable ones, via the Host file. Back to square one! After all, it's a simple click to continue, so I'll do with it. 🤷🏽‍♂️ Thank You
    • F'ing FIIINALLY! Much easier to ask people what their hardware is 🙏 and could also very well just say DDR4 or DDR5 without asking to bloat it too much. I'm also curious to see what it will say in More device info...
    • Sure, that must be why it was revealed at the Sony showcase... the game was announced 5 years ago and the visuals are far from poor, what the hell are you smoking, plus the Switch 2 is pretty much on par with an Xbox Series S. It would be absolutely insane for a dev to build a game "with the Switch 2 in mind" when it's coming to all platforms where the majority of sales will happen.
  • Recent Achievements

    • Week One Done
      jbatch earned a badge
      Week One Done
    • First Post
      Yianis earned a badge
      First Post
    • Rookie
      GTRoberts went up a rank
      Rookie
    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      400
    2. 2
      +FloatingFatMan
      178
    3. 3
      snowy owl
      170
    4. 4
      ATLien_0
      167
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!