Drop down/roll over menu within XHTML/CSS site

Hi all,
I am building a site with XHTML/CSS and want to create a nice drop down menu for one of the links I have and need some advice for the following.
 As I'm quite new with CSS and XHTML I have been coding with just notepad after reading a few books on the subject.
Since I do not know how to code a drop down menu I used dreamweaver and the 'pop up menu' behaviour to add a drop down menu to a link called Promotions I have loacted at the top of my site. This is OK but  I'm going to have a problem with it.
Within the site I also have a floating java-script menu [in a div] that follows the browser window when you scroll up and down. On this floating menu I have the promotions link as well.
If I re-use the dreamweaver code for the promotions link on the floating menu I will have to set an X and Y for the drop down menu, yes?
Iif the div the 'promotions' link is in is floating how can I have the drop down menu for it follow its position?

I hope this makes sense. Basically I want a drop down /roll over menu to appear along side a link in a floating menu. How can I achieve this?
Also, is there a better way to create drop down/pop up menu? Maybe one that fades in/out.
I could revert to Flash, but I would rather keep the site Flash free.



systems_mitsuiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

xberryCommented:
Really, if you want some advice, in areas having to do with navigation don't
make life difficult for you and other users and don't involve javascript nor flash there.
Simply use html/CSS and nice effects I get from this site:
         http://www.cssplay.co.uk/menus/

Lots of menu solutions there, have a feast.

Also I nice trick I tried out only lately, very classic: instead of flash
you can still use animated gifs for all kind of effects ... and the best
of it, anigifs are  so small in size compared to flash and always load,
without any need of having additional support installed ;-)
systems_mitsuiAuthor Commented:
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>


xberryCommented:
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.
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

systems_mitsuiAuthor Commented:
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?

xberryCommented:
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 ; - ))
systems_mitsuiAuthor Commented:
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;
}









systems_mitsuiAuthor Commented:
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.
xberryCommented:
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>

Open in new window

xberryCommented:
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 ; - ))
xberryCommented:
One more time the code in full length, mabe better:


<!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>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
systems_mitsuiAuthor Commented:
cheers bud,

works a treat!
xberryCommented:
So, I'm happy too
if it works for you ; - ))
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.