Multiple (not multi-level) CSS drop down menus

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Multiple (not multi-level) CSS drop down menus

Post 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?
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Post 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 :(
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

google "transmenu" ;)
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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. :)
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Post 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.
nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Post by nutkenz »

little bump, hoping some friendly person will take the time to help me :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

nutkenz
Forum Contributor
Posts: 155
Joined: Tue Jul 19, 2005 12:25 pm

Post by nutkenz »

Page cannot be found?
Post Reply