asked on

CSS Horizontal drop down menu problem.

Can someone please take a look at my CSS and tell me why my horizontal drop down menu isn't working.

I used an online tutorial, and followed it perfectly until I got up to creating the: #navcontainer li ul, #navcontainer li:hover ul and the #navcontainer li li.....Now for some reason, my sub menu doesn't display when I hover over it.....

Am I doing something completely wrong? Is there a more efficient way of creating CSS drop down menus, that I haven't found?

I have looked a lot of stuff online, but was hoping for a professional explanation.

Thank you very much, and any help would be greatly appreciated.

#navcontainer {
	background: #cccccc;
	width: 100%;
	text-align: center;
}
#navcontainer ul {
	margin: 0;
	padding: 0;
}
#navcontainer ul li {
	width: 150px;
	display: inline;
	position: relative;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
#navcontainer li a {
	width: 150px;
	font-family: verdana;
	background: #cccccc;
	color: white;
	text-decoration: none;
	padding: 5px 0;
}
#navcontainer li a:hover {
	background: #999999;
	color: blue;
	text-decoration: underline;
}
#navcontainer li ul {
	margin: 0px; 
	padding: 0px; 
	display: none;
	position: absolute;
	left: 0px;
	top: 30px;
}
#navcontainer li:hover ul {	
                     display: block;
	background: #CCCCCC;
	width: 175px;
}
#navcontainer li li {
	list-style: none; 
	display: list-item;
}
 
--------------------------------------------------------------------------------
<div id="navcontainer">
	<ul>
	<li>
	<a href="#">Home</a>
		<ul>
		<li>sub menu item 1</li>
		<li>sub menu item 2</li>
		<li>sub menu item 3</li>
		<li>sub menu item 4</li>
		</ul>
	</li>
	<li><a href="#">about</a>
		<ul>
		<li>sub menu item 1</li>
		<li>sub menu item 2</li>
		<li>sub menu item 3</li>
		<li>sub menu item 4</li>
		</ul>
	</li>
	<li><a href="#">resources</a>
		<ul>
		<li>sub menu item 1</li>
		<li>sub menu item 2</li>
		<li>sub menu item 3</li>
		<li>sub menu item 4</li>
		</ul>
	</li>
	</ul>
</div>

Open in new window

aibusinesssolutions

What browser are you using? I copied your source there and put it in an html file, and it works fine in Firefox, IE8, and Google Chrome.

kdubbie

ASKER

hey thanks for taking a look, I am using. I.E 7....for some reason the drop down menu doesn't drop...hehe...no really....when I hover the mouse over, all I get is the #navcontainer li a properties. the sub menu items dont view at all.....

I wonder what that's about....can it be i.e 7? and if so do you know a work around?

thank you again

aibusinesssolutions

You aren't seeing anything at all? This is what I see in all 3 browsers.
Capture.JPG

aibusinesssolutions

Yeah I see your problem. li:hover doesn't work in IE7 or lower. :hover only works on an a tag in IE for some reason.

Take a look here: http://www.seoconsultants.com/css/menus/tutorial/

aibusinesssolutions

Also, you can take a look here, at the whatever:hover htc file.

http://www.xs4all.nl/~peterned/csshover.html

kdubbie

ASKER

hey thanks a lot....

But that brings me to another questions, being that I.E is such a popular web browser, does that mean that every website with a horizontal drop menu has some sort of hack to fit in I.E. 7 or earlier?

Fortunately I have dreamweaver, would you recommend to avoid any more headaches that I learn how to use Spry Widgets, instead of trying to code my navigation menu from scratch? I am just looking at it now, and it looks very confusing.

rafe_

Often these dropdown menus are built with javascript, but it is better if you can build them in css

:hover does work on elements other than in IE7 - it is just IE6 with the issue.

The best way to do it is to stick an tag within your main list items, and have the code for your dropdown part inside the tag. This would change the css to the following:

This is fairly sample, it just requires adding an extra a tag in which is a piece of cake. It is definitely worth testing your website in IE6 - see https://www.experts-exchange.com/questions/23869391/Multiple-Versions-of-IE.html?sfQueryTermInfo=1+10+ie+multipl

Good luck!

#navcontainer li a ul {
        margin: 0px; 
        padding: 0px; 
        display: none;
        position: absolute;
        left: 0px;
        top: 30px;
}
#navcontainer li:hover a ul {     
                     display: block;
        background: #CCCCCC;
        width: 175px;
}
#navcontainer li li {
        list-style: none; 
        display: list-item;
}

Open in new window

kdubbie

ASKER

hey thanks, not sure that i follow, I changed the css to the example you've given, but I am not quite sure about what tag you're referring to.
"
The best way to do it is to stick an tag within your main list items, and have the code for your dropdown part inside the tag.
"

Thanks

aibusinesssolutions

I looked in to it a bit more, IE7 does support :hover if you have the most recent updates. The initial version if IE7 did not support :hover however, so you may need to update if you aren't seeing the dropdowns.

kdubbie

ASKER

hey thanks for checking into that for me....and I will do that....but unfortunately I'm sure the world doesn't have the most updated versions, perhaps in a few years all this will go away and CSS3 will fix this problem....

In the mean time I think I will take a look at Spry widgets in Dreamweaver....Before I start can I ask some quick questions about Spry?

Can you customize them to look exactly as you want them too? The default look in dreamweaver is very bland....I'm hoping to add some transparency...

Also it uses some sort of script that prompts I.E 7 to flash the yellow bar across the top..."Active X blah blah blah" I have to right mouse button click on it and allow Active X before the drop down menu actually drops, which kind of sucks.....Is that going to be the case for every Menu bar I create using Dreamweaver? is there a work around to simplify the code so that I don't have to allow Active X?

Also I noticed that Spry widgets add all sorts of Javascript into the code, some in the header and some surrounding the menu bar in the HTML code....but when I view source of sites that have these kind of horizontal menus, I never see such Javasript....

Thank you again for any assistance...and please let me know I should post these questions in a different thread.

aibusinesssolutions

Here is the full documentation on the spry menu widget.

http://livedocs.adobe.com/en_US/Spry/1.4/WS6A91334F-4BA5-45c1-9839-DDC9BC4EDD53.html

It looks like you can modify the CSS file to make it look however you want.

ASKER CERTIFIED SOLUTION

mullagatawny

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial