Page 1 of 1

Multiple (not multi-level) CSS drop down menus

Posted: Thu Sep 22, 2005 2:45 pm
by nutkenz
Ok, I don't understand why this doesn't work in IE6:

Code: Select all

</script>

<style type="text/css">
<!--
html,body {
	margin: 5px;
	padding: 0;
	font-size: 10px;
	font-family: Arial;
	background-color: #D7D7D7;
}

.tdtop {
    background: #fff;
	font-weight: bold;
	border: 0px solid #000;
}

  TD {
    font-face: Arial;
    font-size: 10px;
	background-color: #FFF;
	height: 26px;
}

INPUT, TEXTAREA, SELECT, OPTION {
font-family: Arial;
font-size: 10px;
}

#nav {
    float: left;
}

#footer {
    width: 922px;
    height: 18px;
    border: 1px solid #000;
    background: #FFF;
    padding: 3px;
    text-align: left;
}

.sep {
    float: left;
   	margin: 0;
	padding: 0;
	width: 5px;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 80px; /* Width of Menu Items */
	border-bottom: 1px solid #000;
	}

ul li {
	position: relative;
	}

li ul {
	position: absolute;
	left: 0;
	top: 24px;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #000;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #000;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

</style>
</head>

<body>

<div align="center">
<div style="width: 930px;">
<ul id="nav">
  <li><a href="index.php">Home</a>
    <ul>
      <li><a href="experiences.php">Experiences</a></li>
    </ul>
  </li>
</ul>

<div class="sep">&nbsp;</div>
<ul id="nav">
  <li><a href="clients.php">Clients</a>
  </li>
</ul>

<div class="sep">&nbsp;</div>
<ul id="nav">
  <li><a href="accounts.php?status=all">Accounts</a>
    <ul>
      <li><a href="accounts.php?status=0">Pending</a></li>
      <li><a href="accounts.php?status=2">Active</a></li>
      <li><a href="accounts.php?status=3">Expired</a></li>
    </ul>
  </li>
</ul>
It works perfectly in FF, and only 1 list (first one: Home) works on IE, the other ones don't show when hovered over them...

Anyone know why this is happening?

Posted: Fri Sep 23, 2005 3:41 am
by nutkenz
I've been messing around with the code a bit, but at the very best, I can get the menus displayed all the time in IE (so no hovering required). Of course this impairs both layout and navigation :(

Posted: Fri Sep 23, 2005 4:52 am
by s.dot

Code: Select all

<div align="center" style="width: 930px;"> 
<div class="sep">&nbsp;</div>
<ul id="nav"> 
  <li><a href="index.php">Home</a> 
    <ul> 
      <li><a href="experiences.php">Experiences</a></li> 
    </ul> 
  </li> 
</ul> 
</div>
<div class="sep">&nbsp;</div> 
<ul id="nav"> 
  <li><a href="clients.php">Clients</a> 
  </li> 
</ul> 
</div>
<div class="sep">&nbsp;</div> 
<ul id="nav"> 
  <li><a href="accounts.php?status=all">Accounts</a> 
    <ul> 
      <li><a href="accounts.php?status=0">Pending</a></li> 
      <li><a href="accounts.php?status=2">Active</a></li> 
      <li><a href="accounts.php?status=3">Expired</a></li> 
    </ul> 
  </li> 
</ul>
</div>
</div>
How does this turn out?

Posted: Fri Sep 23, 2005 11:46 am
by nutkenz
scrotaye wrote:

Code: Select all

<div align="center" style="width: 930px;"> 
<div class="sep">&nbsp;</div>
<ul id="nav"> 
  <li><a href="index.php">Home</a> 
    <ul> 
      <li><a href="experiences.php">Experiences</a></li> 
    </ul> 
  </li> 
</ul> 
</div>
<div class="sep">&nbsp;</div> 
<ul id="nav"> 
  <li><a href="clients.php">Clients</a> 
  </li> 
</ul> 
</div>
<div class="sep">&nbsp;</div> 
<ul id="nav"> 
  <li><a href="accounts.php?status=all">Accounts</a> 
    <ul> 
      <li><a href="accounts.php?status=0">Pending</a></li> 
      <li><a href="accounts.php?status=2">Active</a></li> 
      <li><a href="accounts.php?status=3">Expired</a></li> 
    </ul> 
  </li> 
</ul>
</div>
</div>
How does this turn out?
Didn't work at all :(

None of the hovers worked anymore

Posted: Fri Sep 23, 2005 12:38 pm
by feyd
google "transmenu" ;)

Posted: Sat Sep 24, 2005 3:46 am
by nutkenz
Just my luck; This is the placeholder for domain transmenu.com. If you see this page after uploading site content you probably have not replaced the index.html file.

Seems like their website is gone?

Posted: Sat Sep 24, 2005 5:28 am
by feyd
not transmenu.com

http://template.mambotheme.com/452/inde ... _bluetrans
roll over the header links.

http://www.youngpup.net/2004/transmenus/project
should be the code for it.

Posted: Sat Sep 24, 2005 9:35 am
by nutkenz
Hmm... I tried it, but it messed up all the rest on that page, and they're way too heavy. I'd like to keep it as simple as possible.

Posted: Sat Sep 24, 2005 9:55 am
by feyd
the version we've created of it is I think only a few kilobytes for the entire thing. That's before compression is turned on. :)

Posted: Sat Sep 24, 2005 11:12 am
by nutkenz
Could be :)

I just don't want to replace one problem with another. It looks great, but I'm the only one who'll be seeing it, so I'd like to use as little code as possible so I can fix it if standards change later on. It just has to be simple and work in all browsers. Thanks though for suggesting it, but I'd prefer finding out what's wrong with the code I already have.

Posted: Sat Oct 01, 2005 8:46 am
by nutkenz
little bump, hoping some friendly person will take the time to help me :)

Posted: Tue Oct 04, 2005 1:31 pm
by Luke

Posted: Sat Oct 08, 2005 11:15 am
by nutkenz
Page cannot be found?