Css Drop Down Menu

Hi experts,

I'm trying to use a css drop down menu into my website.

Here are the source : Css3 Drop Down Menu .

Here are my troubles :
- the 4th last menu, start at "products", marked with the class "menu_right" ; must be aligned at the left of the container (<ul>) but it don't work.
- the top menus marked with class "drop" don't work too : normally a small picture (an arrow - drop.png) must be showed at the right of the menu, to indicate that a submenu exists.

How it should be :
menu-prototype.tiff

How it is now:
 menu-now.tiff

Do you have an idea what's wrong ?

I have applied all the css & html code as follow :
- css : the same code as the final example except the width of the menu
#menu
{
	/*width: 940px;*/
	width: 90%;
}

Open in new window


- html :
<ul id="menu">
	<li> <!--- index group (Home) --->
		<cfinvoke returnvariable="variables.indexPages"		component="tools.pagesTools" method="getPages" group="index">
		<cfloop array="#variables.indexPages#" index="variables.page">
			<cfif variables.page.getPosition() NEQ 0>
				<cfset variables.pageName = uCase(variables.page.getTitle())>
				<cfoutput> <a class="navigationBarLink" href="#variables.page.getUrl()#" onclick="processing();">#variables.pageName#</a> </cfoutput>
			</cfif>
		</cfloop>
	</li>
		
	<li> <!--- company group (About Joe Cool) --->
		<a class="drop">ABOUT JOE COOL</a>
		<div class="dropdown_2columns">
			<cfinvoke returnvariable="variables.companyPages"	component="tools.pagesTools" method="getPages" group="company">
			<cfloop array="#variables.companyPages#" index="variables.page">
				<cfif variables.page.getPosition() NEQ 0>
					<cfset variables.pageName = uCase(variables.page.getTitle())>
					<div class="col_2">
						<cfoutput> <a class="navigationBarLink" href="#variables.page.getUrl()#" onclick="processing();">#variables.pageName#</a> </cfoutput>
						<hr />
					</div>
				</cfif>
			</cfloop>
		</div>
	</li>
		
	<li class="menu_right"> <!--- products group (Products) --->
		<a class="drop">PRODUCTS</a>
		<div class="dropdown_3columns"> <!--- align_right --->
			<cfinvoke returnvariable="variables.productsPages"	component="tools.pagesTools" method="getPages" group="products">
			<cfloop array="#variables.productsPages#" index="variables.page">
				<cfif variables.page.getPosition() NEQ 0>
					<cfset variables.pageName = uCase(variables.page.getTitle())>
					<div class="col_3">
						<cfoutput> <a class="navigationBarLink" href="#variables.page.getUrl()#" onclick="processing();">#variables.pageName#</a> </cfoutput>
						<hr />
					</div>
				</cfif>
			</cfloop>
		</div>
	</li>
		
	<li class="menu_right"> <!--- best sellers link --->
		<a class="navigationBarLink" href="/fashion/jewellery/Products.cfm?" onclick="processing();"> <cfoutput>BEST SELLERS</cfoutput> </a>
	</li>
		
	<li class="menu_right"> <!--- new items link --->
		<a class="navigationBarLink" href="/fashion/jewellery/Products.cfm?" onclick="processing();"> <cfoutput>NEW ITEMS</cfoutput> </a>
	</li>
		
	<li class="menu_right"> <!--- search box --->
		<a>
			<cfform action="/fashion/jewellery/search.cfm" method="post" id="navigationBarSearch" onsubmit="return validate();">
				<cfoutput> <cfset variables.searchLabel = ormExecuteQuery("from Page where page = 'Search' AND cfcName like '%_#session.language#'")> </cfoutput>
				<cfinput type="text" name="userSearch" maxlength="100" value="Enter keyword(s) here">
				<cfinvoke returnvariable="variables.javascript" component="javascripts.javascriptsTools" method="validateInput" controlName="userSearch" isRequired="true" 
								controlLabelValue="#variables.searchLabel[1].getTitle()#" maxLength="100" minLength="1" isAlphaNumericOnly="true">
				<cfoutput>#variables.javascript#</cfoutput>
				<cfinput type="submit" name="submitSearch" value="#variables.searchLabel[1].getTitle()#" onclick="processing();">
				<cfinput type="hidden" name="validate" value="search">
			</cfform>
		</a>
		
		<script type="text/javascript">
			function validate()
			{
				if(validate_userSearch())
				{
					return true;
				}
				return false;
			}
		</script>
	</li>
</ul>

Open in new window


I attach the both concerned files ("2_navigationBar.cfm" -> renamed in "2_navigationBar.cfm.txt" & "navigationBar.css")
I also attache a print screen of the look of my menu now (menu_now.tiff) & a prototype of how it should be (menu_prototype.tiff).

Well, the code is in html & coldfusion, but no matter, it works fine, just the css who does tricks to me :-)
The coldfusion code just retrieve the different page names.

Thanks a lot.
navigationBar.css
2-navigationBar.cfm.txt
adam1hAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

LZ1Commented:
Anyway we can see a live link?
adam1hAuthor Commented:
Hi LZ1,

Yes, you could see it at Live view

Regards.
LZ1Commented:
First for the arrow issue:
This class should have some type of background image #menu li .drop.  Otherwise it won't show anything indicating a drop down.

Then the .menu_right class should have float:right;.  Did you copy the CSS exactly?

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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

adam1hAuthor Commented:
Thanks for your comment.

Yes I have copied the css exactly, I just have changed the #menu width

I'll double check.
adam1hAuthor Commented:
The #menu li .drop class has a backgroung image :
#menu li .drop
{
	padding-right: 21px;
	background: url(/pictures/graphics/drop.png) no-repeat rightright 8px;
}
#menu li:hover .drop
{
	background: url(/pictures/graphics/drop.gif) no-repeat rightright 7px;
}

Open in new window

What do you mean exactly ?



The ..menu_right now runs well ; I have correct the code.
It was :
#menu .menu_right
{
	float: rightright;
	margin-right: 0px;
}

Open in new window


It is now :
#menu .menu_right
{
	float: right;
	margin-right: 0px;
}

Open in new window


Don't now why it was rightright.

Thanks for that.
adam1hAuthor Commented:
I have corrected other rightright, and now the arrow show good.

Thank you a thousand time for your precious help LZ1.
LZ1Commented:
Glad to help
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.