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;
}
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).
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
Question
Nagisan
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:
default.advanced.css:
dropdown.css:
helper.css:
and finally, index.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).
Link to comment
https://www.neowin.net/forum/topic/893280-css-menu-with-transparency-breaks-in-ie/Share on other sites
1 answer to this question
Recommended Posts