CSS Horizontal Navigation Alignment

Im having issues with a horizontal navigation bar that has two sub-tiers of inline horizontal navigation. Id like for all of the sub-tiers to line up on the left hand side (under the first tab) no matter where their parent tab is located. I have it working correctly in IE, but on all of the other browsers the sub-nav lines begin below the tab they originate from, which is not what I'm looking for.

If you take a look at my file (see link below), the first four tabs will give you second-tier dropdowns. If you mouse over Knowledge Center/Additional Resources youll see the third tier dropdowns. I've also included a screen shot showing it working correctly in IE and not working in Opera.

Heres a link to the working menu bar:
http://thehiphouse.com/staging/cpm-partners/menutest.html

And the menu bar css can be found here:
http://thehiphouse.com/staging/cpm-partners/css/cpmMenuBar.css

I'm not sure if it makes a difference or not, but this started as a Spry Menu in Dreamweaver, which I then manipulated to fit my needs.

Thank you in advance for your help!

cpm-menuss.gif
jenniferneumanAsked:
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.

Tony van SchaikFront-end Web developerCommented:
I have dropline menu that is working in most browsers, i have tested it in IE8, Firefox, Safari 4, Google Chrome, see code snippet:
Good luck

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.dropline {
	margin-left:200px;
	position:relative;
	font-family:arial, verdana, sans-serif;
	font-size:11px;
	width:760px;
	height:50px;
	display:block;
	z-index:500;
}
 
.dropline .table {
	display:table;
}
 
.dropline .select, .dropline .current {
	margin:0;
	padding:0;
	list-style:none;
	display:table-cell;
	white-space:nowrap;
}
 
.dropline li {
	margin:0;
	padding:0;
	height:auto;
	float:left;
}
 
.dropline .select a {
	display:block;
	height:30px;
	float:left;
	background: url(pro_line_0.gif);
	padding:0 30px 0 30px;
	text-decoration:none;
	line-height:30px;
	white-space:nowrap;
	color:#365686;
}
 
.dropline .current a {
	display:block;
	height:20px;
	float:left;
	background: url(pro_line_2.gif);
	padding:0 0 0 15px;
	text-decoration:none;
	line-height:20px;
	white-space:nowrap;
	color:#365686;
}
 
.dropline .current a b {
	display:block;
	padding:0 30px 0 15px;
	background:url(pro_line_2.gif) right top;
}
 
.dropline .select a:hover, .dropline .select li:hover a {
	padding:0 0 0 15px;
	cursor:pointer;
	color:#000000;
}
 
.dropline .select a:hover b, .dropline .select li:hover a b {
	display:block;
	float:left;
	padding:0 30px 0 15px;
	background:url(pro_line_1.gif) right top;
	cursor:pointer;
}
 
.dropline .select_sub {
	display:none;
}
 
/* IE6 only */
.dropline table {
	border-collapse:collapse;
	margin:-1px;
	font-size:1em;
	width:0;
	height:0;
}
 
.dropline .sub {
	/*	display:table; */
	float:left;
	padding:0;
	list-style:none;
	margin:0px;
}
 
.dropline .sub_active .current_sub a, .dropline .sub_active a:hover {
	background:transparent;
	color:#f00;
}
 
.dropline .select :hover .select_sub, .dropline .current .show {
	display:block;
	position:absolute;
	width:760px;
	top:20px;
	background:url(back_0.gif);
	padding:0;
	z-index:100;
	left:0;
	text-align:center;
}
 
.dropline .current .show {
	z-index:10;
}
 
.dropline .select :hover .sub li a, .dropline .current .show .sub li a {
	display:block;
	float:left;
	background:transparent;
	padding:0 10px 0 10px;
	margin:0;
	white-space:nowrap;
	border:0;
	color:#000000;
}
 
.dropline .current .sub li.sub_show a {
	color:#365686;
	cursor:default;
}
 
.dropline .select :hover .sub li a:hover, .dropline .current .sub li a:hover {
	visibility:visible;
	color:#365686;
	text-decoration:underline;
}
</style>
</head>
<body>
<div class="dropline">
  <div class="table">
    <ul class="select">
      <li><a href="#nogo"><b>Home</b> </a></li>
    </ul>
    <ul class="select">
      <li><a href="#nogo"><b>Services</b></a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub">
          <ul class="sub">
            <li> <a href="#nogo"></a><a href="#nogo">Professional Services</a></li>
            <li><a href="#nogo">Technical services</a></li>
            <li><a href="#nogo">Helpdesk services</a></li>
            <li><a href="#nogo">Content Services</a></li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="select">
      <li><a href="#nogo"><b>Solutions</b></a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <div class="select_sub show">
          <ul class="sub">
            <li> <a href="#nogo"></a><a href="#nogo">Some solution</a></li>
            <li><a href="#nogo">How?</a></li>
            <li><a href="#nogo">Examples and cases</a></li>
            <li><a href="#nogo">For your organisation</a></li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="select">
      <li><a href="#nogo"><b>About us</b> </a>
        <div class="select_sub">
          <ul class="sub">
            <li><a href="#nogo"></a><a href="#nogo">Our clients</a> </li>
            <li><a href="#nogo">History</a></li>
            <li><a href="#nogo">Management</a></li>
            <li><a href="#nogo">Request Information</a></li>
            <li><a href="#nogo">Where you can find us</a></li>
          </ul>
        </div>
      </li>
    </ul>
    <ul class="select">
      <li><a href="#nogo"><b>Contact</b></a>
        <div class="select_sub">
          <ul class="sub">
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

Open in new window

0
IanThCommented:
are you using cs4 or cs3
0
Tony van SchaikFront-end Web developerCommented:
CS3 at work and CS4 at home.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Tony van SchaikFront-end Web developerCommented:
Lol you asked the asker ignore my answer.
0
jenniferneumanAuthor Commented:
Thanks, therealteune. That's really close!

Ive substituted my graphics and slightly altered your code a bit to fit my design (width, margin, padding, etc - mind you I know just enough about CSS to make me dangerous!), and its much closer than what I had before as its working in IE, Opera, Chrome and Safari.

The issues Im still having are:
1. The third tier nav should only appear when its second tier parent button is moused over. Its currently showing up from the main menu mouse over. For example, when you mouse over Knowledge Center in the main menu, the second tier menu buttons show up which is correct, but the third tier shouldnt show up  until you mouse over Additional Resources, its parent button.
2. Along those same lines, on the Projects tab, there are two, third tier menus  one from Education and one from Municipal. Only the one from Municipal shows at this point.
3. The whole thing blows up in FireFox  seems to be a spacing/width issue?

The revised code is below, and if you want to see it in action here's the link:
http://thehiphouse.com/staging/cpm-partners/newnavtest.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.dropline {
	margin:0;
	padding:0;
	position:relative;
	width:638px;
	height:80px;
	display:block;
	z-index:500;
}
 
.dropline .table {
	display:table;
}
 
.dropline .select, .dropline .current {
	margin:0;
	padding:0;
	list-style:none;
	display:table-cell;
	white-space:nowrap;
}
 
.dropline li {
	margin:0;
	padding:0;
	height:auto;
	float:left;
}
 
.dropline .select a {
	display:block;
	height:30px;
	float:left;
	margin:0;
	padding:0;
	text-decoration:none;
	line-height:25px;
	white-space:nowrap;
}
 
.dropline .current a {
	display:block;
	height:20px;
	float:left;
	margin:0;
	padding:0;
	text-decoration:none;
	line-height:25px;
	white-space:nowrap;
}
 
.dropline .current a b {
	display:block;
	margin:0;
	padding:0;
}
 
.dropline .select a:hover, .dropline .select li:hover a {
	margin:0;
	padding:0;
	cursor:pointer;
}
 
.dropline .select a:hover b, .dropline .select li:hover a b {
	display:block;
	float:left;
	margin:0;
	padding:0;
	cursor:pointer;
}
 
.dropline .select_sub {
	display:none;
}
 
/* IE6 only */
.dropline table {
	border-collapse:collapse;
	margin:-1px;
	font-size:1em;
	width:0;
	height:0;
}
 
.dropline .sub {
	/*	display:table; */
	float:left;
	padding:0;
	list-style:none;
	margin:0;
	padding:0;
}
 
.dropline .sub_active .current_sub a, .dropline .sub_active a:hover {
	background:transparent;
	color:#f00;
}
 
.dropline .select :hover .select_sub, .dropline .current .show {
	display:block;
	position:absolute;
	width:638px;
	top:25px;
	padding:0;
	z-index:100;
	left:0;
}
 
.dropline .current .show {
	z-index:10;
}
 
.dropline .select :hover .sub li a, .dropline .current .show .sub li a {
	display:block;
	float:left;
	background:transparent;
	padding:0;
	margin:0;
	white-space:nowrap;
	border:0;
}
 
.dropline .current .sub li.sub_show a {
	cursor:default;
}
 
.dropline .select :hover .sub li a:hover, .dropline .current .sub li a:hover {
	visibility:visible;
}
</style>
</head>
<body>
<div class="dropline">
    <div class="table">
        <ul class="select">
            <li><a href="#nogo"><img src="images/nav_whoweare.gif" width="97" height="18" border="0" alt="Who We Are" onMouseOver="this.src='images/nav_whoweare2.gif'" onMouseOut="this.src='images/nav_whoweare.gif'" /></a>
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="#nogo"></a><a href="index.html"><img src="images/nav2_firmoverview.gif" width="117" height="22" border="0" alt="Firm Overview" onMouseOver="this.src='images/nav2_firmoverview2.gif'" onMouseOut="this.src='images/nav2_firmoverview.gif'" /></a></li>
                        <li><a href="ourphilosophy.html"><img src="images/nav2_ourphilosophy.gif" width="113" height="22" border="0" alt="Our Philosophy" onMouseOver="this.src='images/nav2_ourphilosophy2.gif'" onMouseOut="this.src='images/nav2_ourphilosophy.gif'" /></a></li>
                        <li><a href="testimonials.html"><img src="images/nav2_testimonials.gif" width="97" height="22" border="0" alt="Testimonials" onMouseOver="this.src='images/nav2_testimonials2.gif'" onMouseOut="this.src='images/nav2_testimonials.gif'" /></a></li>
                        <li><a href="leadership.html"><img src="images/nav2_leadership.gif" width="87" height="22" border="0" alt="Leadership" onMouseOver="this.src='images/nav2_leadership2.gif'" onMouseOut="this.src='images/nav2_leadership.gif'" /></a></li>
                        <li><a href="companydata.html"><img src="images/nav2_companydata.gif" width="92" height="22" border="0" alt="Company Data" onMouseOver="this.src='images/nav2_companydata2.gif'" onMouseOut="this.src='images/nav2_companydata.gif'" /></a></li>
                        <li><a href="#nogo"><img src="images/clear_pixel.gif" width="132" height="22" border="0" /></a></li>
                    </ul>
                </div>
        	</li>
        </ul>
        
        <ul class="select">
            <li><a href="#nogo"><img src="images/nav_whatwedo.gif" width="97" height="18" border="0" alt="What We Do" onMouseOver="this.src='images/nav_whatwedo2.gif'" onMouseOut="this.src='images/nav_whatwedo.gif'" /></a>
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="#nogo"></a><a href="index.html"><img src="images/nav2_projectconstructionmgmt.gif" width="210" height="22" border="0" alt="Project & Construction Management" onMouseOver="this.src='images/nav2_projectconstructionmgmt2.gif'" onMouseOut="this.src='images/nav2_projectconstructionmgmt.gif'" /></a></li>
                        <li><a href="projectscheduling.html"><img src="images/nav2_projectscheduling.gif" width="137" height="22" border="0" alt="Project Scheduling" onMouseOver="this.src='images/nav2_projectscheduling2.gif'" onMouseOut="this.src='images/nav2_projectscheduling.gif'" /></a></li>
                        <li><a href="projectcontrols.html"><img src="images/nav2_projectcontrols.gif" width="120" height="22" border="0" alt="Project Controls" onMouseOver="this.src='images/nav2_projectcontrols2.gif'" onMouseOut="this.src='images/nav2_projectcontrols.gif'" /></a></li>
                        <li><a href="training.html"><img src="images/nav2_training.gif" width="69" height="22" border="0" alt="Training" onMouseOver="this.src='images/nav2_training2.gif'" onMouseOut="this.src='images/nav2_training.gif'" /></a></li>
                        <li><a href="ourapproach.html"><img src="images/nav2_ourapproach.gif" width="102" height="22" border="0" alt="Our Approach" onMouseOver="this.src='images/nav2_ourapproach2.gif'" onMouseOut="this.src='images/nav2_ourapproach.gif'" /></a></li>
                    </ul>
                </div>
            </li>
        </ul>
       
    <ul class="select">
        <li><a href="#nogo"><img src="images/nav_projects.gif" width="85" height="18" border="0" alt="Projects" onMouseOver="this.src='images/nav_projects2.gif'" onMouseOut="this.src='images/nav_projects.gif'" /></a>
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <div class="select_sub show">
                <ul class="sub">
                    <li><a href="#nogo"></a><a href="#nogo"><img src="images/nav2_education.gif" width="89" height="22" border="0" alt="Education" onMouseOver="this.src='images/nav2_education2.gif'" onMouseOut="this.src='images/nav2_education.gif'" /></a>
                    	<!--[if lte IE 6]><table><tr><td><![endif]-->
                        <div class="select_sub show">
                            <ul class="sub">
                            	<li><a href="#nogo"></a><a href="k-12.html"><img src="images/nav3_k-12.gif" width="56" height="22" border="0" alt="K-12" onMouseOver="this.src='images/nav3_k-122.gif'" onMouseOut="this.src='images/nav3_k-12.gif'" /></a></li>
                				<li><a href="highereducation.html"><img src="images/nav3_highereducation.gif" width="107" height="22" border="0" alt="Higher Education" onMouseOver="this.src='images/nav3_highereducation2.gif'" onMouseOut="this.src='images/nav3_highereducation.gif'" /></a></li>
                				<li><a href="#nogo"><img src="images/clear_pixel.gif" width="475" height="22" border="0" /></a></li>
                            </ul>
                        </div>
                	</li>
                    <li><a href=href="#nogo"><img src="images/nav2_municipal.gif" width="75" height="22" border="0" alt="Municipal" onMouseOver="this.src='images/nav2_municipal2.gif'" onMouseOut="this.src='images/nav2_municipal.gif'" /></a>
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <div class="select_sub show">
                            <ul class="sub">
                            	<li><a href="#nogo"></a><a href="airports.html"><img src="images/nav3_airports.gif" width="77" height="22" border="0" alt="Airports" onMouseOver="this.src='images/nav3_airports2.gif'" onMouseOut="this.src='images/nav3_airports.gif'" /></a></li>
                                <li><a href="civicbuildings.html"><img src="images/nav3_civicbuildings.gif" width="110" height="22" border="0" alt="Civic Buildings" onMouseOver="this.src='images/nav3_civicbuildings2.gif'" onMouseOut="this.src='images/nav3_civicbuildings.gif'" /></a></li>
                                <li><a href="roadsandbridges.html"><img src="images/nav3_roadsandbridges.gif" width="125" height="22" border="0" alt="Roads And Bridges" onMouseOver="this.src='images/nav3_roadsandbridges2.gif'" onMouseOut="this.src='images/nav3_roadsandbridges.gif'" /></a></li>
                                <li><a href="seaports.html"><img src="images/nav3_seaports.gif" width="55" height="22" border="0" alt="Seaports" onMouseOver="this.src='images/nav3_seaports2.gif'" onMouseOut="this.src='images/nav3_seaports.gif'" /></a></li>
                                <li><a href="#"><img src="images/clear_pixel.gif" width="271" height="22" border="0" /></a></li>
                            </ul>
                        </div>
                	</li>
                    <li><a href="transportation.html"><img src="images/nav2_transportation.gif" width="112" height="22" border="0" alt="Transportation" onMouseOver="this.src='images/nav2_transportation2.gif'" onMouseOut="this.src='images/nav2_transportation.gif'" /></a></li>
                    <li><a href="waterwastewater.html"><img src="images/nav2_waterwastewater.gif" width="137" height="22" border="0" alt="Water/Waste Water" onMouseOver="this.src='images/nav2_waterwastewater2.gif'" onMouseOut="this.src='images/nav2_waterwastewater.gif'" /></a></li>
                    <li><a href="industrial.html"><img src="images/nav2_industrial.gif" width="76" height="22" border="0" alt="Industrial" onMouseOver="this.src='images/nav2_industrial2.gif'" onMouseOut="this.src='images/nav2_industrial.gif'" /></a></li>
                    <li><a href="federal.html"><img src="images/nav2_federal.gif" width="65" height="22" border="0" alt="Federal" onMouseOver="this.src='images/nav2_federal2.gif'" onMouseOut="this.src='images/nav2_federal.gif'" /></a></li>
                    <li><a href="international.html"><img src="images/nav2_international.gif" width="84" height="22" border="0" alt="International" onMouseOver="this.src='images/nav2_international2.gif'" onMouseOut="this.src='images/nav2_international.gif'" /></a></li>
                </ul>
            </div>
        </li>
    </ul>
              
        <ul class="select">
            <li><a href="#nogo"><img src="images/nav_knowledgecenter.gif" width="151" height="18" border="0" alt="Knowledge Center" onMouseOver="this.src='images/nav_knowledgecenter2.gif'" onMouseOut="this.src='images/nav_knowledgecenter.gif'" /></a>
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub show">
                    <ul class="sub">
                        <li><a href="#nogo"></a><a href="articles.html"><img src="images/nav2_articles.gif" width="75" height="22" border="0" alt="Articles" onMouseOver="this.src='images/nav2_articles2.gif'" onMouseOut="this.src='images/nav2_articles.gif'" /></a></li>
                        <li><a href="presentations.html"><img src="images/nav2_presentations.gif" width="104" height="22" border="0" alt="Presentations" onMouseOver="this.src='images/nav2_presentations2.gif'" onMouseOut="this.src='images/nav2_presentations.gif'" /></a></li>      
                        <li><a href="#nogo"><img src="images/nav2_additionalresources.gif" width="133" height="22" border="0" alt="Additional Resources" onMouseOver="this.src='images/nav2_additionalresources2.gif'" onMouseOut="this.src='images/nav2_additionalresources.gif'" /></a>
                            <!--[if lte IE 6]><table><tr><td><![endif]-->
                            <div class="select_sub show">
                                <ul class="sub">
                                    <li><a href="#nogo"></a><a href="professionalorganizations.html"><img src="images/nav3_professionalorganizations.gif" width="194" height="22" border="0" alt="Professional Organizations" onMouseOver="this.src='images/nav3_professionalorganizations2.gif'" onMouseOut="this.src='images/nav3_professionalorganizations.gif'" /></a></li>
                                    <li><a href="journals.html"><img src="images/nav3_journals.gif" width="70" height="22" border="0" alt="Journals" onMouseOver="this.src='images/nav3_journals2.gif'" onMouseOut="this.src='images/nav3_journals.gif'" /></a></li>
                                    <li><a href="smallbusinessinfo.html"><img src="images/nav3_smallbusinessinfo.gif" width="169" height="22" border="0" alt="Small Business Info" onMouseOver="this.src='images/nav3_smallbusinessinfo2.gif'" onMouseOut="this.src='images/nav3_smallbusinessinfo.gif'" /></a></li>
                                    <li><a href="#nogo"><img src="images/clear_pixel.gif" width="205" height="22" border="0" /></a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        
        <ul class="select">
            <li><a href="joinourteam.html"><img src="images/nav_joinourteam.gif" width="118" height="18" border="0" alt="Join Our Team" onMouseOver="this.src='images/nav_joinourteam2.gif'" onMouseOut="this.src='images/nav_joinourteam.gif'" /></a></li>
        </ul>
        
        <ul class="select">
                <li><a href="contactus.html"><img src="images/nav_contactus.gif" width="90" height="18" border="0" alt="Contact Us" onMouseOver="this.src='images/nav_contactus2.gif'" onMouseOut="this.src='images/nav_contactus.gif'" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

Open in new window

0
Tony van SchaikFront-end Web developerCommented:
I never used this code for a 2 level subitems, you can try to add a new class on the 2nd level menu item UL. I was searching for an example with 2 level dropline levels but didnt find any with CSS only, this can be done with Javascript.
I will try to edit the CSS for the 2nd level hope this will work out in all browsers.
I also found an other menu that can be useful for your needs a dropline with Flyout menu. http://www.cssplay.co.uk/menus/pro_line_down_fly.html#nogo
 
0
jenniferneumanAuthor Commented:
At this point I'd be willing to consider the Javascript if that would solve the problem...
0
Tony van SchaikFront-end Web developerCommented:
This is the only drop line menu i could find with multi-levels:

http://www.stunicholls.com/menu/jquery-dropline-7.html

Jquery is required you can implement that with putting this in your

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>


 


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/jquery-dropline-7.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 
#menu {margin-top:20px; position:relative; height:38px;}
 
 
#dropline {position:relative; font-size:12px; height:38px; background:url(images/back.gif);}
 
#dropline, #dropline ul {padding:0; margin:0; list-style:none; width:700px;}
 
#dropline table {border-collapse:collapse; margin:-1px -10px; 0 0; padding:0; width:0; height:0; font-size:12px;}
#dropline li {float:left; height:38px;}
#dropline li a {float:left; display:block; height:38px; line-height:38px; padding:0 20px 0 10px; font-family:arial, sans-serif; font-size:11px; color:#000; text-decoration:none; font-weight:bold;}
#dropline li ul li a {color:#666;}
 
#dropline li a.down {background:url(images/down.gif) no-repeat right center;}
 
#dropline li ul li a.down {font-size:14px; font-weight:bold;}
 
#dropline li ul {position:absolute; top:38px; left:-9999px; z-index:10; background:url(images/fade.png);}
 
#dropline li ul.floatRight li {float:right;}
 
</style>
 
 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<script type="text/javascript"> 
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
/* <![CDATA[ */
$(document).ready(function(){
 
$("#dropline li.current").children("ul")	.css("left", "0px")
								.show();
$("#dropline li.current").children(":first-child").css("color", "#c00")
 
 
$("#dropline li").hover(function(){
	if(this.className.indexOf("current") == -1)  {
		getCurrent = $(this).parent().children("li.current:eq(0)");
		if(this.className.indexOf("top") != -1)  {
			$(this).children("a:eq(0)").css("color","#069");
		}
		else {
			$(this).children("a:eq(0)").css("color","#000");
		}
		if (getCurrent = 1 ) {
			$(this).parent().children("li.current:eq(0)").children("ul").hide();;
		}
	$(this).children("ul:eq(0)").css("left", "0px")
								.show();
	}
},function(){
	if(this.className.indexOf("current") == -1)  {
		getCurrent = $(this).parent().children("li.current:eq(0)");
		if(this.className.indexOf("top") != -1) {
			$(this).children("a:eq(0)").css("color","#000");
		}
		else {
			$(this).children("a:eq(0)").css("color","#666");
		}
		if (getCurrent = 1 ) {
			$(this).parent().children("li.current:eq(0)").children("ul").show();;
		}
$(this).children("ul:eq(0)").css("left", "-99999px")
							.hide();
	}
});
 
 
});
/* ]]> */
</script>
 
</head>
 
<body>
<div id="menu">
<ul id="dropline">
	<li class="top"><a href="#url">HOME</a></li>
	<li class="top"><a class="down" href="#url">CONTACT</a>
		<ul class="sub">
			<li><a href="#url">Email</a></li>
			<li><a href="#url">Letter</a></li>
			<li><a href="#url">Telephone</a></li>
			<li><a href="#url">Fax</a></li>
		</ul>
	</li>
	<li class="top"><a class="down" href="#url">CONTACTS</a>
		<ul class="sub">
			<li><a href="#url">Support</a></li>
			<li><a class="down" href="#url">Sales</a>
				<ul class="sub">
					<li><a href="#url">USA</a></li>
					<li><a href="#url">Canadian</a></li>
					<li><a href="#url">South American</a></li>
					<li><a class="down" href="#url">European</a>
						<ul class="sub">
							<li><a class="down" href="#url">British</a>
								<ul class="sub">
									<li><a href="#url">London</a></li>
									<li><a href="#url">Liverpool</a></li>
									<li><a href="#url">Glasgow</a></li>
									<li><a class="down" href="#url">Bristol</a>
										<ul class="sub">
											<li><a href="#url">Redland</a></li>
											<li><a href="#url">Hanham</a></li>
											<li><a href="#url">Eastville</a></li>
										</ul>
									</li>
									<li><a href="#url">Cardiff</a></li>
									<li><a href="#url">Belfast</a></li>
								</ul>
							</li>
							<li><a href="#url">French</a></li>
							<li><a href="#url">German</a></li>
							<li><a href="#url">Spanish</a></li>
						</ul>
					</li>
					<li><a href="#url">Australian</a></li>
					<li><a href="#url">Asian</a></li>
				</ul>
			</li>
			<li><a href="#url">Buying</a></li>
			<li><a class="down" href="#url">Photographers</a>
				<ul class="sub">
					<li><a href="#url">Studio</a></li>
					<li><a href="#url">Pets &amp; Children</a></li>
					<li><a class="down" href="#url">Outdoor</a>
						<ul class="sub">
							<li><a href="#url">Landscape</a></li>
							<li><a href="#url">Architecture</a></li>
							<li><a href="#url">Seascape</a></li>
							<li><a href="#url">Wildlife</a></li>
						</ul>
					</li>
					<li><a href="#url">Wedding &amp; Special Occasions</a></li>
				</ul>
			</li>
			<li><a href="#url">Stockist</a></li>
			<li><a href="#url">General</a></li>
		</ul>
	</li>
	<li class="top"><a class="down" href="#url">SERVICES</a>
		<ul class="sub">
			<li><a href="#url">Printing</a></li>
			<li><a href="#url">Photo Framing</a></li>
			<li><a href="#url">Retouching</a></li>
			<li><a href="#url">Archiving</a></li>
		</ul>
	</li>
	<li class="top current"><a class="down" href="#url">PRODUCTS</a>
		<ul class="sub">
			<li><a class="down" href="#url">Cameras</a>
				<ul class="sub">
					<li><a href="#url">Nikon</a></li>
					<li><a href="#url">Minolta</a></li>
					<li><a href="#url">Pentax</a></li>
					<li><a href="#url">Canon</a></li>
					<li><a href="#url">Panasonic</a></li>
					<li><a href="#url">Kodak</a></li>
				</ul>
			</li>
			<li class="current"><a class="down" href="#url">Lenses</a>
				<ul class="sub">
					<li><a href="#url">Wide Angle</a></li>
					<li><a href="#url">Standard</a></li>
					<li><a href="#url">Telephoto</a></li>
					<li class="current"><a class="down" href="#url">Zoom</a>
						<ul class="sub">
							<li><a href="#url">35mm to 125mm</a></li>
							<li class="current"><a href="#url">50mm to 250mm</a></li>
							<li><a href="#url">125mm to 500mm</a></li>
						</ul>
					</li>
					<li><a href="#url">Mirror</a></li>
					<li><a class="down" href="#url">Non standard</a>
						<ul class="sub">
							<li><a href="#url">Bayonet mount</a></li>
							<li><a href="#url">Screw mount</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#url">Flash Guns</a></li>
			<li><a href="#url">Tripods</a></li>
			<li><a href="#url">Filters</a></li>
		</ul>
	</li>
	<li class="top"><a class="down" href="#url">WHERE TO FIND US</a>
		<ul class="sub floatRight">
			<li><a href="#url">Travelling by car or rail</a></li>
			<li><a href="#url">Using public transport</a></li>
			<li><a href="#url">Our place on the map</a></li>
		</ul>
	</li>
	<li class="top"><a class="down" href="#url">SHOP</a>
		<ul class="sub floatRight">
			<li><a href="#url">Online</a></li>
			<li><a href="#url">Catalogue</a></li>
			<li><a href="#url">Mail Order</a></li>
		</ul>
	</li>
	<li class="top"><a href="#url" id="privacy">PRIVACY</a></li>
</ul>
</div>
 
</body>
</html>

Open in new window

0

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
jenniferneumanAuthor Commented:
That one did the trick!! Thanks so much therealtune!
0
Tony van SchaikFront-end Web developerCommented:
You're welcome
0
jenniferneumanAuthor Commented:
Perfect solution!
0
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
CSS

From novice to tech pro — start learning today.