CSS Menu Problem

TheVillageIdiot27 · Jul 7, 2006

I am trying to redesign a site navigation system that is currently Table/JavaScript based into a List CSS design.

I am at testing stage and I have got it largely working in Netscape but it doesn't seem to want to know in IE and I am not sure what I am doing wrong.

I currently have

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
	<head>
		<title>Menu Test Page</title>
		<style>
			#menu
			{
				font-family: Arial, Helvetica, sans-serif;
			}
			.menu_sublist
			{
				position: absolute;
			}
			#menu a, a:visited, a:active
			{
				color: #004173;
				font-weight: bold;
				text-decoration: none;
			}
			#menu a:hover
			{
				color: #7495BC;
				font-weight: bold;
				text-decoration: none;
			}
			#menu ul
			{
				padding: 0px;
				margin: 0px;
			}
			#menu ul li
			{
				float: left;
				width: 100px;
				list-style: none;
				padding: 0px;
				margin: 0px;
			}
			#menu ul li a
			{
				width: 100px;
			}
			#menu ul li ul
			{
				list-style: none;
				padding: 0px;
				margin: 0px;
				width: 175px;
				position: absolute;
				left: auto;
				display: none;
			}
			#menu ul li:hover ul
			{
				display: block;
			}
			#menu ul li ul li
			{
				list-style: none;
				padding: 0px;
				margin: 0px;
				width: 175px;
				border: 1px solid #7495BC;
				background-color: #FFFFFF;
			}
			#menu ul li:hover ul li:hover
			{
				background-color: #7495BC;
			}
			#menu ul li ul li:hover a, a:visited, a:active, a:hover
			{
				color: #FFFFFF;
			}

		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li>
					<a href="#">Item 1</a><br/>
					<ul>
						<li><a href="#">Sub-Item 1a</a></li>
						<li><a href="#">Sub-Item 1b</a></li>
						<li><a href="#">Sub-Item 1c</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Item 2</a><br/>
					<ul>
						<li><a href="#">Sub-Item 2a</a></li>
						<li><a href="#">Sub-Item 2b</a></li>
						<li><a href="#">Sub-Item 2c</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Item 3</a><br/>
					<ul>
						<li><a href="#">Sub-Item 3a</a></li>
						<li><a href="#">Sub-Item 3b</a></li>
						<li><a href="#">Sub-Item 3c</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

In Netscape all is okay, but in IE I have had to add the the '<br/>' tags to get the sublists to appear underneath and I can't for the life of me find out how to get the li:hover bit to work.

I am very new to CSS to any real depth so any help would be gratefully apprecciated

kaht · Jul 7, 2006

The :hover pseudo-class only works on anchor tags in IE. You will have to use a bit of javascript to get it to work in IE.

Do a google search for "suckerfish dropdown menu" and you will see examples of how this is done.

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]
[banghead]

kaht · Jul 8, 2006

did this help?

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]
[banghead]

TheVillageIdiot27 · Jul 10, 2006

It did kind of:

I have found the following which is interesting

http://www.codeproject.com/html/purecssmenus.asp

and seems to work, I plan to have a play with it and see if I can get it to work with a list based rather than tables layout.

Thanks

Tarwn · Jul 11, 2006

Here is another CSS one that I built personally. I haven't had tme to write it up anywhere, but there are some brief instructions on the page.

http://www.tiernok.com/tt/dropdown/

It does have one piece of javascript to make IE work correctly, but it allows you to make menus either horizantal or vertical just by changing a portion of the class. Additionally it allows infinite depth (but doesn't do edge of screen detection) without having to add in extra lines of code.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS Menu Problem

TheVillageIdiot27

Programmer

kaht

Programmer

kaht

Programmer

TheVillageIdiot27

Programmer

Tarwn

Programmer

Similar threads

Part and Inventory Search

Sponsor