Forums

adamrj

This is a bit of a complicated query. I'm trying to write a dropdown transparent menu with floating submenus. It works fine in FF but in IE7, the transparency applied to the initial dropdown causes the submenu to truncate at the edges of its parent. If you remove the transparency on the parent it works fine, but that's not what I want! Any help would be very much appreciated. I suspect this is a bug in IE7 which I'm not going to be able to find a workaround for... Code is below, ignore the IE7 alignment issues - I haven't sorted this yet.


<!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>xxx</title>
<style>
#nav {
	float: left;
	width: 990px;
	height: 25px;
	background-color: #d0d4e6;
	margin-bottom: 15px;
	border-bottom: 1px solid #000;
}
#nav li.liMenuLevel1 {
	list-style: none;
	float: left;
	padding: 0 11px 0 8px;
	background: url(../images/nav-back.gif) top right repeat-y;
	display: block;
}
#nav li.liMenuLevel1 a {
	color: #000;
	text-decoration: none;
	line-height: 25px;
}
#nav li.liMenuLevel1:hover {
	background-color: #c1cee9;
}
.ulMenuLevel1 {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.liMenuLevel1 {
	list-style-type: none;
	float: left;
}
.menuLevel1 {
	cursor: default;
}
li .ulMenuLevel2, li .ulMenuLevel3 {
	position: absolute;
	list-style-type: none;
	margin: 0 0 0 -8px;
	padding: 0;
	display: none;
	background-color: #333333;
	filter: alpha(opacity=95);
	-moz-opacity: 0.95;
	KhtmlOpacity: .95;
	opacity: .95;
}
li .ulMenuLevel3 {
	margin-left: 130px;
	margin-top: -26px;
	width: 300px !important;
	display: none;
}
.liMenuLevel2, .liMenuLevel3 {
	line-height: 22px;
	font-family: arial;
}
.liMenuLevel2 a, .liMenuLevel2 a:visited, .liMenuLevel3 a, .liMenuLevel3 a:visited {
	text-decoration: none;
	display: block;
	font-size: 8pt;
	color: #ffffff !important;
	width: 250px;
	padding-left: 15px;
}
.liMenuLevel2 a:hover {
	background: transparent;
	background: #424242;
	color: #76B900 !important;
}
li:hover .ulMenuLevel2, li.over .ulMenuLevel2, li.liMenuLevel2:hover .ulMenuLevel3, li.liMenuLevel2.over .ulMenuLevel3 { /* display submenu items on hover */
	display: block;
	margin-top: -26px;
	width: 300px !important;
}
li>ul {
	top: auto;
	left: auto;
}
</style>
</head>
<body>
<div id=\"container\">
  <div id=\"header\"> </div>
  <div id=\"nav\">
    <ul class=\"ulMenuLevel1\">
      <li class=\"liMenuLevel1\"><a class=\"menuLevel1\">Menuitem</a>
        <ul class=\"ulMenuLevel2\">
          <li class=\"liMenuLevel2\"><a href=\"/events/agm.index\"></a></li>
        </ul>
        <ul class=\"ulMenuLevel2\">
          <li class=\"liMenuLevel2\"><a href=\"/about/committee.html\">Committee</a></li>
          <li class=\"liMenuLevel2\"><a href=\"/about/members.html\">Members &nbsp;<strong>&#8250;</strong></a>
            <ul class=\"ulMenuLevel3\">
              <li class=\"liMenuLevel3\"><a href=\"/about/member.html\">Become a member</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/experiences.html\">Personal experiences</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/letters.html\">Letters</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/places.html\">Favourite places</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/authors.html\">Authors</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/poets.html\">Poets</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/arts.html\">Arts</a></li>
            </ul>
          </li>
          <li class=\"liMenuLevel2\"><a href=\"/about/graduation.html\">Graduation &nbsp;<strong>&#8250;</strong></a>
            <ul class=\"ulMenuLevel3\">
              <li class=\"liMenuLevel3\"><a href=\"/about/writeups.html\">Write ups</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/events.html\">Linked Events</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/honorary.html\">Honorary Degrees</a></li>
            </ul>
          </li>
          <li class=\"liMenuLevel2\"><a href=\"/about/services.html\">Services &nbsp;<strong>&#8250;</strong></a>
            <ul class=\"ulMenuLevel3\">
              <li class=\"liMenuLevel3\"><a href=\"/about/merchandise.html\">Merchandise</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/other.html\">Other Services</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/classified.html\">Classified</a></li>
            </ul>
          </li>
          <li class=\"liMenuLevel2\"><a href=\"/about/omega.html\">Newsletter &nbsp;<strong>&#8250;</strong></a>
            <ul class=\"ulMenuLevel3\">
              <li class=\"liMenuLevel3\"><a href=\"/about/nextissue.html\">Next Issue</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/archives.html\">Archives</a></li>
              <li class=\"liMenuLevel3\"><a href=\"/about/advertising.html\">Advertising</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

chriscoyier

I threw this up online in case it helps anyone troubleshoot. At first glance... I have no idea what's wrong :D

http://css-tricks.com/examples/adamrj-TEMP.html

Edwin

A dropdown menu only with css? Is this all browser-compatible? I can remember you once said that that would be almost impossible and that javascript was the best solution to do this :roll:

chriscoyier

Nah CSS-only rollovers are totally possible, I just tend to like the javascript ones better as they support stuff like clicking and animations/fading, and delays and stuff like that.

You can poke around on CSS Play for about a zillion nice examples of CSS only dropdowns:
http://www.cssplay.co.uk/

The problem here is the weird truncation happening in IE7 on the submenus. I haven't had time to dig into it yet, but it's super weird that transparency is causing it. Might possibly be an undocumented (as of yet) bug.

treehouse : what would you like to learn today?

Forums

Opacity and layers in IE7