Forum Moderators: not2easy
I can't easily describe without providing a link to a demo page (which is on an unused domain I own for testing things out), but as I understand it you aren't allowed to post links on this site? The only other option is to post a big block of CSS and HTML which will be a bit messy but I'll try!
[edited by: eglons at 7:50 am (utc) on Oct. 18, 2008]
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {background-color:#ffffff; text-align:center; margin:0px; padding:0px;}
#frame {width:1000px; margin-right:auto; margin-left:auto; margin-top:0px; padding:0px; text-align:left;}
#outside{border:1px solid #CC66FF; background:#CC66FF; position:relative; left: 0px; top: 0px; background-color: #CC66FF; width:1000px; visibility: visible;}
#navigation-1 {padding:1px 0; margin:0px; list-style:none; width:100%; height:25px; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; font:normal 8pt verdana, arial, helvetica;}
#navigation-1 li {margin:0; padding:0; display:block; float:left; position:relative; width:120px;}
#navigation-1 li a:link, #navigation-1 li a:visited {padding:6px 0; display:block; text-align:center; text-decoration:none; background:#CC66FF; color:#ffffff; width:120px; height:13px;}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {padding:6px 0; display:block; text-align:center; text-decoration:none; background:#FF99FF; color:#ffffff; width:118px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff;}
#navigation-1 li ul.navigation-2 {margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:226px; position:absolute; top:25px; left:-1px; border:1px solid #CC66FF; border-top:none;}
#navigation-1 li:hover ul.navigation-2 {display:block;}
#navigation-1 li ul.navigation-2 li {width:1118px; clear:left; width:226px;}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {clear:left; background:#CC66FF; padding:4px 4px; width:218px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; text-align:left;}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {clear:left; background:#FF99FF; padding:4px 4px; width:218px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; text-align:left;}
#navigation-1 li ul.navigation-2 li a span {position:absolute; top:0; left:104px; font-size:12pt; color:#fe676f;}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {position:absolute; top:0; left:104px; font-size:12pt; color:#ffffff;}
</style></head>
<body>
<div id="container">
<div id="header">
<div id="outside">
<ul id="navigation-1">
<li><a href="#">MENU1--></a></li>
<li><a href="ew_members.asp">Dropdown1</a>
<ul class="navigation-2">
<li><a href="index.asp">Dropdown1-item1</a></li>
<li><a href="index.asp">Dropdown1-item2</a></li>
</ul>
</li>
<li><a href="ew_members.asp">Dropdown2</a>
<ul class="navigation-2">
<li><a href="ew_maintain_client.asp?client_id=33">Dropdown2-item1</a></li>
<li><a href="ew_maintain_client.asp?client_id=33">Dropdown2-item2</a></li>
<li><a href="ew_maintain_client.asp?client_id=33">Dropdown2-item3</a></li>
<li><a href="ew_maintain_client.asp?client_id=33">Dropdown2-item4</a></li>
</ul>
</li>
</ul>
</div>
<div id="outside">
<ul id="navigation-1">
<li><a href="#">MENU2--></a></li>
<li><a href="ew_members.asp">Dropdown1</a>
<ul class="navigation-2">
<li><a href="index.asp">Dropdown1-item1</a></li>
<li><a href="index.asp">Dropdown1-item2</a></li>
</ul>
</li>
<li><a href="ew_members.asp">Dropdown2</a>
<ul class="navigation-2">
<li><a href="ew_maintain_client.asp?client_id=33">Dropdown2-item1</a></li>
<li><a href="ew_maintain_client.asp?client_id=33">Dropdown2-item2</a></li>
<li><a href="ew_maintain_client.asp?client_id=33">Dropdown2-item3</a></li>
<li><a href="ew_maintain_client.asp?client_id=33">Dropdown2-item4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="main">
<div id="content">
<div id="text">
<p>text content </p>
<p style="padding:20px"><br>
</div>
</div>
</div>
</div>
</body>
</html>
[edited by: SuzyUK at 10:18 pm (utc) on Oct. 18, 2008]
[edit reason] shortened text content [/edit]
good job on the code sample, thanks - all I did was remove the foo text to shorten it, it's doesn't make a difference to your menu
your code needs a z-index tweak
IE can be a bit weird with z-index (a hasLayout throwback!)
what works for me is to bring the whole of the FIRST "outside" div up a layer up on the z axis, it's already set to position: relative so it will accept a z-index,
just add an extra class to the first outside div and apply z-index: 1; to it.
but and I realise this is only sample code so you may already know this, you should only use an ID once per page so #outside and #navigation-1 should be classes too rather than ID's or if you want to keep them as ID's the second and subsequent menus should have different names, and then you can group the selectors.
if you change to classes you can use multiple class names on an element so that first "outside" div might look like this:
<div class="outside first">
<ul class="navigation-1"> with no change to your existing CSS, except to replace all #symbols with '.' symbols and add
.first {z-index: 1;}
