• 0

CSS Menu with transparency breaks in IE

Asked by Nagisan,

 Share

Question

Grand Master

Nagisan

Posted
Posted

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

Nagisan

Posted
  • Author
Posted

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.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.