No replies
superhk
Offline
newbie
Last seen: 14 years 1 day ago
Joined: 2009-02-10
Posts: 1
Points: 0

Hey guys,

So the problem I have is that I have a semi-transparent horizontal drop down menu.

The dropdown menu works perfectly fine in FF but in IE7.0 its not working.

Semi-transparent horizontal drop down menu in FF:

Semi-transparent horizontal drop down menu in IE7.0:

Guys can you help me to solve this problem

=====================
Below is the CSS code:
=====================
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: x-small;
width: auto;
}

ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
background-color: #B6CEFB;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
filter:Alpha(opacity= 80); /*IE*/
-moz-opacity: 0.8; /*FireFox*/
}

ul.MenuBarHorizontal ul li
{
width: 8.2em;
}

ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 90%;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
/* filter:Alpha(opacity=100); /*IE*/
-moz-opacity: 1; /*FireFox*/
}

ul.MenuBarHorizontal ul
{
border: 4px solid #FFF;
}

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #414141;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #999;
color: #FFF;
text-decoration: underline;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

AttachmentSize
firefoxpic.GIF2.67 KB
iepic.GIF2.96 KB