Need some assistance with a CSS menu

[torndownunit]

I am trying to incorporate a drop down menu from Dynamic Drive, into a CSS layout. (this menu http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm)

This is the page I am trying to use it on: http://www.ic-designs.ca/test/csslayout2.html . This is a premade CSS layout I downloaded. I haven't really edited much on either the menu CSS or the layout CSS. I mainly just increased the size of the header.

(I know it's rough looking, but I am just trying to get these elements working together before I do anything else)

The problem is the drop down options in the menu are way off the right for some reason in every browser I check it on. Can anyone tell me how to fix this?

The menu is in a separate CSS sheet at www.ic-designs.ca/test/chrometheme/chromestyle.css

The other style sheet is at www.ic-designs.ca/test/css/main2.css

Again, I know things are unorganized, but I can't get through this initial problem with the menu so I haven't worked on much else.

Thanks for any tips

 

[DewGuy1999]

I'm still pretty much a beginner with CSS, but, if you make a new page with just the menu does it work properly? If so, then theres something in the different CSS files that are overriding one another.

 

[torndownunit]

Ya it does work fine on it's own page.

That makes sense. I can't see anything styles that conflict looking through the sheets, but I am not very advanced with my CSS.

 

[Darth.Titan]

If you use Firefox, download the Firebug extension. Then you can right-click and "Inspect Element". That will give you a list of what CSS rules are affecting your menu.

 

[torndownunit]

hmm seem to be getting errors trying to install Firebug. I'll have to try later. Thanks.

 

[DewGuy1999]

Ya it does work fine on it's own page.

That makes sense. I can't see anything styles that conflict looking through the sheets, but I am not very advanced with my CSS.

I'm not an expert, or even that knowledgeable with CSS, but I tweaked it a bit, I can't say that this is the best thing to do, or even the right thing to do, but try this for your main2.css, it fixes the menu problem, but might create other problems, I don't know:

/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */
html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background:gray;
	
	font-family:arial,sans-serif;
	font-size:small;
	color:#666;
}

h1 { 
	font:1.5em georgia,serif; 
	margin:0.5em 0;
}
h2 {
	font:1.25em georgia,serif; 
	margin:0 0 0.5em;
}


h1, h2, a {
		color:orange;
	}
p { 
	line-height:1.5; 
	margin:0 0 1em;
}
div#container {
	margin:0 auto; /* center, not in IE5 */
	width:875px; background:#f0f0f0; height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; -moz-border-radius: 15px; -webkit-border-radius: 15px; /* real browsers */
}
/*Layout
*/
div#header { background-image: url(../media/kc_auctions-banner.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 98% 0; height: 162px; padding:0.5em 0.5em 0; }
div#header p {
		font-style:italic;
		font-size:1.1em;
		margin:0;
	}
div#content { margin-top: 10px;
	 /* bottom padding for footer */
}
div#content p {
		text-align:justify;
	}
div#footer {
	width:100%;
	bottom:0; /* stick to bottom */
	background:#ddd;
	border-top:6px double gray;
}
div#footer p {
		padding:1em;
		margin:0;
	}
/* Rounded Corners */
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;}
#xsnazzy h1 {font-size:2.5em; color:#000;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:25px 1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ffc; border-left:1px solid #000; border-right:1px solid #000;}
.xb1 {margin:0 5px; background:#000;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent { display:block; background:#ffc; border-color: #000; border-style: solid; border-width:0 1px; }

 

[angelwatt]

It sets the left position in the JavaScript. It seems to be a bug of sorts. If you narrow your browser window to the width of the page you'll see the sub-menus line up correctly. Contact the developer so they know about this problem and they might be able to fix it. You may be better off looking at other menu options. Most do navigation as nested lists rather than having the sub-menus as different elements on the page.

 

[astroot]

Use this menu template instead: http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129

You don't need JavaScript to accomplish that task.