• 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

    • DiskGenius 6.2.0.1829 - All Versions: Free, Lite & Portable by Razvan Serea DiskGenius is a full-featured partition manager, which is designed to optimize disk usage for Windows users. It will efficiently help you recover lost data, resize/split partition, backup files, edit hex data, check bad sectors, manage virtual disks, erase data, etc.. Create a system image backup for current Windows with simple clicks to keep the operating system under protection. DiskGenius key features: Partition Management - It can create format, resize, extend, backup, split, hide and clone partition, both MBR and GPT are supported. Disk and partition conversion - Convert dynamic disk to basic, convert virtual disk format and convert MBR to GPT, convert primary partition to logical. File recovery - It can recover files deleted or emptied form recycle bin, recover files from damaged partition or disk and recover files by file type and supports file preview and file filter. Partition recovery - It is the best partition recovery program in that it can recover files from damaged, corrupted and RAW partitions, search for lost partition and recover files from it, besides, it can fix partition table. RAID recovery - It can reconstruct Virtual RAID and recover files from it, and all RAID types are supported. Sector Editor - A Hex editor is embedded to help users edit raw hex data and recover data manually. Backup and Restore - It can backup and restore partition including system partition, hard disk and partition table. Bad Tracks - It can check and repair bad sectors for all storage devices; check hard disk S.M.A.R.T. information. Delete files permanently - It can delete files permanently so that they can't be recovered by any data recovery software. Virtual Disk - It supports virtual disks, including VMware, Virtual PC and Virtual Box. Create WinPE bootable disk and you can manage disk partition when system crashes or there is no operating system on your computer. Support FAT12/FAT16/FAt32/exFAT/NTFS/EXT2/EXT3/EXT4 file system format. DiskGenius 6.2.0.1829 changelog: Add the "Disk Speed Test" feature. Add the "Windows Boot Repair and Conversion" feature. Add the BMB21-2019 erase standard to the "Erase Sectors" feature. Add support for restoring an individual partition from a PMFX disk image file. Enhanced The "Verify Or Repair Bad Sectors/Blocks" feature displays disk read speed in the detection window during scanning. The "Quick Partition" dialog box allows users to quickly select the number of partitions by pressing the numeric keys 1, 2, 7, 8, or 9. The "Set Volume Name" dialog box supports selecting preset volume labels provided by the software. The "Copy Sectors" feature supports resuming copy tasks after modifying the number of skipped bad sectors. Add the "TRIM Optimization" option to the format dialog box. The "Clone Partition" and "Clone Disk" features perform TRIM optimization on target partitions or disks before cloning. Add support for Not Equal To search conditions (prefixed with "!") when searching hexadecimal data in the sector editor. Optimize the display of capacity values in the program interface to show two decimal places. Add a minimize button to dialogs that may require long processing time. Enhance support for the ReFS file system. Enhance support for newer HIF and MP4 formats when recovering files by type. Enhance support for the EXT4 file system. Enhance compatibility of the "File Recovery" feature with special data structures. Fixed Fixed the issue that the selected file system type automatically reverted to NTFS after changing it to exFAT or EXT4 in the "Quick Partition" dialog box. Fixed inaccurate Unicode string search results in the "Sector Editor" feature. Fixed the issue that exceptions might occur when adding multiple disks in the "Erase Sectors" feature. Fixed the issue that insufficient target disk space was incorrectly reported in some cases when cloning, backing up, or restoring disks. Fixed the issue that folder modification timestamps were not preserved when copying files from ReFS partitions. Fixed the issue that Excel-format reports generated by features such as file copying or bad sector checking could not be opened when the report contained more than one million rows. Fixed the issue that folders were not displayed in the exclude-folder dialog box when backing up partitions to image files. Fixed the issue that the "Erase Sectors" feature could not be executed in some cases. Download: DiskGenius 6.2.0.1829 | 63.9 MB (Freeware, paid upgrade available) Download: DiskGenius Portable 64-bit | 40.0 MB Download: DiskGenius Portable 32-bit | 36.0 MB Download: DiskGenius Lite 64-bit | 13.4 MB Download: DiskGenius Lite 32-bit | 11.6 MB View: DiskGenius Home Page | DiskGenius Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Really? Use a better search engine https://www.google.com/search?...ourceid=chrome&ie=UTF-8
    • Seems like Neowin has transitioned into being simps for the white house. I can't find a review for the last UFC games that came out.
  • Recent Achievements

    • Week One Done
      agatameier earned a badge
      Week One Done
    • One Month Later
      agatameier earned a badge
      One Month Later
    • Week One Done
      ssd21345 earned a badge
      Week One Done
    • Contributor
      MarkHughes4096 went up a rank
      Contributor
    • Dedicated
      jordanspringer earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      513
    2. 2
      +Edouard
      182
    3. 3
      PsYcHoKiLLa
      143
    4. 4
      ATLien_0
      95
    5. 5
      Steven P.
      76
  • Tell a friend

    Love Neowin? Tell a friend!