CSS drop down menu problems

**ADP** · 12-15-2009, 07:44 PM

I used the code from the jQuery Multi Level CSS Menu #2 to create a nav menu as I have been having problems getting something to work correctly in IE and firefox. this menu looks like it will work fine in IE but appears to be all jarbled up in Firefox. Ugh. I would appreciate any help on this - creating a CSS drop down menu is proving to be a big pain for me!

**bluewalrus** · 12-15-2009, 08:18 PM

Link, Code?

**ADP** · 12-15-2009, 09:01 PM

sorry, here is the link to the menu:

http://www.ssb-cpa.com/ssb-final/jquery_inc.html

I can also past the CSS or .js code if needed.

**bluewalrus** · 12-16-2009, 12:20 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>
</head>
<body>
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
	<li><a href="http://www.dynamicdrive.com">Home</a></li>
	<li><a href="#">About Us</a>
		<ul>
			<li><a href="#">Firm News</a></li>
			<li><a href="#">Our Story</a></li>
			<li><a href="#">Our Partners</a></li>
			<li><a href="#">Our Team</a></li>
			<li><a href="#">Our Commitment to You</a></li>
		</ul>
	</li>
	<li><a href="#">Services</a>
	<ul>
		<li><a href="#">Accounting Financial Services</a></li>
		<li><a href="#">Employee benefit plan audits</a></li>
		<li><a href="#">Tax Services</a></li>
		<li><a href="#">SOX 404 Compliance Testing</a></li>
		<li><a href="#">Litigation Support (Forensic Accounting)</a></li>
		<li><a href="#">Business Valuations</a></li>
		<li><a href="#">Business Advisory Services</a></li>
		<li><a href="#">Estate and Retirement Planning</a></li>
		<li><a href="#">Business Development Workshops</a></li>
		<li><a href="#">Technology Support</a></li>
	</ul>
	</li>
	<li><a href="#">Careers</a>
	<ul>
		<li><a href="#">Our Culture</a></li>
		<li><a href="#">Our Experiences</a></li>
		<li><a href="#">Why We Love SSB</a></li>
		<li><a href="#">Frequently Asked Questions</a></li>
		<li><a href="#">Career Profiles</a></li>
	</ul>
    </li>
	<li><a href="#">Folder 2</a>
    	<ul>
			<li><a href="#">Sub Item 2.1</a></li>
			<li><a href="#">Folder 2.1</a>
				<ul>
					<li><a href="#">Sub Item 2.1.1</a></li>
					<li><a href="#">Sub Item 2.1.2</a></li>
					<li><a href="#">Folder 3.1.1</a>
					<ul>
						<li><a href="#">Sub Item 3.1.1.1</a></li>
						<li><a href="#">Sub Item 3.1.1.2</a></li>
						<li><a href="#">Sub Item 3.1.1.3</a></li>
						<li><a href="#">Sub Item 3.1.1.4</a></li>
						<li><a href="#">Sub Item 3.1.1.5</a></li>
					</ul>
				</li>
				<li><a href="#">Sub Item 2.1.4</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
	</ul>
<br style="clear: left" />
</div>
</body>
</html>

**ADP** · 12-16-2009, 02:00 PM

you are a life saver!!!! What was the problem with the code? I am using this nav file as an include in the header and it now functions correctly in both IE and Firefox - but looks like there is an alignment issue in IE. If you have any advice, I would appreciate it. Here is the link to the working page:

http://www.ssb-cpa.com/ssb-final/index6.asp

Thanks a million!!!!!

**bluewalrus** · 12-16-2009, 02:52 PM

I can't advice on IE i don't have it so can't see what it looks like. One of your line items (<li>) containing an unordered list <ul> wasn't closed so everything was inside of it and then everything inside was out of order as well.

**ADP** · 12-16-2009, 05:59 PM

thanks again for the help... if anyone can advise what may need changed to properly align the nav vertically when viewed in Internet Explorer I would appreciate it.

**bluewalrus** · 12-16-2009, 09:18 PM

You could try firebug lite and see what is different between ff and ie and adjust in an ie conditional statement.

http://getfirebug.com/lite.html

**wadeinni** · 12-28-2009, 10:17 AM

Hi guys, I'm cross-browser testing a page on my site and am struggling with a CSS alignment problem in Firefox 3.0. The center content keeps getting pushed down the bottom of the page where the left nav content ends.

The problem is located here: http://www.teenclassifieds.net/index...mp3-ringtones/

It works fine in IE7 and IE8 but I can't get it to display properly in Firefox 3.0. Can anyone give me a clue as to what could be the problem and a possible fix.

Thanks

Thread: CSS drop down menu problems

Thread Tools

Search Thread

CSS drop down menu problems

Bookmarks

Bookmarks

Posting Permissions