• 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

    • oh look, we are under the control of the U.S again, is it not about time we as a country did this ourselves if they want it, not rely on greedy U.S. tech companies? We are capable of doing so as a country. I hate how the U.K have gone with no industry like we used to have and relying on other countries. Maybe we should follow Trump words, and make Britain great again and stop bending over to please Trump and other countries. Our government is Trumps puppet. I know we need to co-operate on some things, but come on.
    • Actually I see no problem is notifying readers in advance. The post author mentioned that it'll be available on July 22.
    • We can actually disable this new AI powered tab groups suggestion feature. https://www.askvg.com/enable-o...mart-tab-groups-in-firefox/
    • Zero Install 2.27.1 by Razvan Serea Zero Install is a decentralized cross-platform software-installation system available under the LGPL. It allows software developers to publish programs directly from their own web-sites, while supporting features familiar from centralized distribution repositories such as shared libraries, automatic updates and digital signatures. It is intended to complement, rather than replace, the operating system’s package management. 0install packages never interfere with those provided by the distribution. Zero Install also has some interesting features not often found in traditional package managers. For example, while it will share libraries whenever possible, it can always install multiple versions of a package in parallel when there are conflicting requirements. Installation is always side-effect-free (each package is unpacked to its own directory and will not touch shared directories), making it ideal for use with sandboxing technologies and virtualization. The XML file describing the program’s requirements can also be included in a source-code repository, allowing full dependency handling for unreleased developer versions. For example, a user can clone a Git repository and build and test the program, automatically downloading newer versions of libraries where necessary, without interfering with the versions of those libraries installed by their distribution, which continue to be used for other software. Zero Install 2.27.1 changelog: Improved compression performance Reject non-ASCII characters in capability IDs Improved validation of capability Download: Zero Install 2.27.1 | 4.2 MB (Open Source) View: Zero Install Website | Zero Install Features | Apps | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      MIghty Haul earned a badge
      Week One Done
    • One Month Later
      MIghty Haul earned a badge
      One Month Later
    • Collaborator
      KD2004 earned a badge
      Collaborator
    • One Month Later
      ataho31016 earned a badge
      One Month Later
    • One Month Later
      Delahenty Machinery earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      591
    2. 2
      Michael Scrip
      201
    3. 3
      ATLien_0
      192
    4. 4
      +FloatingFatMan
      140
    5. 5
      Xenon
      126
  • Tell a friend

    Love Neowin? Tell a friend!