• 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

    • Right Click on My Computer Icon -> Properties(?)
    • HomeBank 5.9.2 by Razvan Serea HomeBank is a free software (as in "free speech" and also as in "free beer") that will assist you to manage your personal accounting. It is designed to easy to use and be able to analyse your personal finance and budget in detail using powerful filtering tools and beautiful charts. If you are looking for a completely free and easy application to manage your personal accounting, budget, finance then HomeBank should be the software of choice. HomeBank also benefits of more than 19 years of user experience and feedback, and is translated by its users in around 56 languages. Highlights: Cross platform, supports GNU/Linux, Microsoft Windows, Mac OS X Import easily from Intuit Quicken, Microsoft Money or other software Import bank account statements (OFX, QIF, CSV, QFX) Duplicate transaction detection Automatic cheque numbering Various account types : Bank, Cash, Asset, Credit card, Liability Scheduled transaction Category split Internal transfer Month/Annual budget Dynamic powerful reports with charts Automatic category/payee assignment Vehicule cost HomeBank 5.9.2 fixes: bugfix: #2112135 scheduled with limitation don't stop and goes erroneous data bugfix: #2111663 variable scope issue in ui-assign.c bugfix: #2111359 remind status not synced in transfers Download: HomeBank 5.9.2 | 20.2 MB (Open Source) Download: 3rd party packages (macOSX. Ubuntu...etc) View: HomeBank Website | Support | Features | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • How long until the Windows 11 hating bots come and say that Windows 11 committed atrocities against their family and their dog?
  • 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
      171
    4. 4
      ATLien_0
      169
    5. 5
      Xenon
      134
  • Tell a friend

    Love Neowin? Tell a friend!