Drop down/roll over menu within XHTML/CSS site

Hi xberrry,

you right, I don't want to go down the path of Flash/Java script for nav, although my client wants a floating menu, so can't really steer away from Javascript this time!!

After some research want I need is a sub menu [fly out menu style], one level, just on the promotions link.
I understand it's a bit of a pain to make it cross-browser compliant, what with Internet Exploder!
But if you or anyone else can give me a heads-up on how to make a one level fly out menu on the promotions link contained with the floating div/code I have below, would be appricated:

Code on my index page, within the floating Div:
<div id="floatdiv" style="  
position:absolute;  
width:173px;
height:152px;
left:0px;top:0px;  
padding: 18px;
list-style-image: url(images/bullet.jpg);
padding-top: 35px;
background-repeat: no-repeat;  
background-image: url(images/float_menu.gif)">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Promotions</a></li>
</li>
</ul>
  </div>

Not quite sure yet what you want, also my javascript knowledge is not much better than yours I'm afraid : - )
but I know another resource:

      http://www.dynamicdrive.com/dynamicindex1/

There is really lots of variations of javascript implemented menus but you
would have to go through the links and see
what is appropriate for you.

Hi bud, here is what I now have,

XHTML:

<<ul>
<li><a href="#">Promotions</a></li>
<ul>
<li><a href="#">V1 Accel</a></li>
</ul>
</li>
</ul>

CSS:

ul ul{
list-style-image: none;
background: #24323a;
position: absolute;
left: -160px;
width: 90px;
margin: 0;
padding: 0;

}


ul li: hover ul {

left: 160px;
}

What I need it, that when you hover over the promotions link, the V1 Accel link moves to its new position, left: 160px

I understand I might need some extra code for it to work in IE?

Anyone now what I need for this fly out menu to work?

Sorry mate, but with the code that you gave me hereinabove, you won't get very far, I'm afraid
(won't work for IE6, also it has many mistakes).

Why you don't for example stick to this one:

http://www.cssplay.co.uk/menus/flyout2.html

simple right click with your mouse button on browser window and then you
can select source code of the example I gave you.
Simple move to the point where it starts with
<h2>A revised and simplified flyout menu with THREE sub levels </h2>
It also works for IE6, but for that purpose it contains a workaround
(the lines which look like <!--[if lte IE 6]><table><tr><td><![endif]-->).
The CSS is on same page, starting from where it says
 <style type="text/css">
The sample is built for four levels of menu, so
you can leave away code for the levels that you won't use.

Of course, you'd have to replace by your own items and maybe extend
or shorten the html code to your favour. Simply try and learn from it ; - ))

If you need more help, I am still around here ; - ))

Hi xberry, sorry for the late reply, just back from the crimbo hols!
Thanks for the heads up and the code, however I  still cannot get it to work in Internet Explorder 6.
Works OK in Firefox. Although the position of the sub menu is slightly different.
I think the problem might be with the IE fix?
Can you take a look?

Here is the XHTML and CSS  I now have:
XHTML:

<div class="menu" id="floatdiv"
 style="  
position:absolute;  
width:173px;
height:152px;
left:0px;top:0px;  
padding: 18px;
list-style-image: url(images/bullet.jpg);
padding-top: 35px;
background-repeat: no-repeat;  
background-image: url(images/float_menu.gif)">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Promotions<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">V1 Acel</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>


CSS in linked style sheet:

.menu {
z-index:1000;

}

.menu table {position:absolute; border-collapse:collapse; top:40; left:0; z-index:100; font-size: 1.3em;}

.menu ul ul{
list-style-type: none;
background: #24323a;
position: absolute;
width: 80px;
padding-left: 20px;
top:40;
left: 120px;
visibility:hidden;
}


.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}

Hi Xberry,

just an update on things. I've now manged to get it working in Exploder, by adding

.menu a, .menu a:visited {
list-style-image: url(images/bullet.jpg);
}
 to the XHTML. Although there is just one draw back involving  IE.
When I roll over the promotions link the V1 Accel link appears just to the left of it, just as I want, but when I move the mouse to the left to hover over the A1 Accel sub menu link it dissapears. This does not happen in Firefox.

Ok, if you take the code from below and simply change colors for your need, then you're basically there:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Flyout</title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu {
z-index:1000;
font-size:90%;
margin:25px 0 50px 15px; /* this page only */
}
 
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
 
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
 
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
background:#d4d8bd;
height:26px;
}
 
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
 
 
/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
 
/* hack for IE5.5 and IE6.0 - chnage colors here in this section if you like*/
* html .menu a, * html .menu a:visited {background:#d4d8bd; width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#949e7c;}
/*same for submenue: */
* html .sub1 li a, * .sub1 li a:visited {background:#000; width:150px; w\idth:149px;}
* html .sub1 li a:hover {color:#fff; background:#000;}
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px; 
}
 
/* make the second level visible when hover on first level list OR link  */
.menu ul li:hover ul, .menu ul a:hover ul li a {
	visibility:visible;
	color: #fff;
}        
 
.sub1 li {
	background: #000;
}
 
.sub1 a, .sub1 a:visited {
	color: #fff;
}
 
</style>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->
</head>
<body>
        <div class="menu">
		<ul>
			<li><a href="../index.html">Contact</a></li>
			<li><a href="#nogo">About Us</a></li>
			<li class="sub"><a href="#nogo">Promotions &#187;<!--[if IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="sub1">
					<li><a class="sub_ie6" href="../index.html">V1 Acel<!--[if IE 7]><!--></a><!--<![endif]-->					
					</li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>
	</div>
</body>
</html>
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:

I did remove all sections that you don't need, did modify for your sample,
even put different color for sublink (you need define seperately for FF and IE6).
So the rest should be dead easy. Actually I wouldn't change too much in your case,
since it works out quite nice. Leave position and size if possible.
If there is a gap between menu and submenu then in any browser
the submenu wouldn't hold on the screen when hovering from menu
to sub. I really is only because of the gap that you had. so there is no gap in my sample
and ... for giving fair respect to the person who did provide this for us,
please leave the copyright in ; - ))

cheers bud,

works a treat!