CSS - Horizontal Drop-down Menu Positioning Problem

I'm trying to get my horizontal navigation to work for a PTA page I'm creating. New to CSS and I think I've got a bit of the gist of it... but I'm really struggling with this. I've mostly "found" the coding I needed and then modified it to suit my needs.

As a designer, though, I still want it to look the way I want it to and I'm not quite able to accomplish that.

Basically, I would like a drop down menu added to the navigation I've created here - lwptsa . org/newsite/

This is the solution I found - lwptsa . org/newsite/dropdown . html

But I am unable to get the dark blue to continue to the end of the container.

** ACK, not allowed to post images. You can find the image I'm referring to he lwptsa . org/newsite/images/navigation . jpg

I'd like to fix the left margin spacing and it's coloring (A), making the lines between the buttons/blocks white (B) and having the blue flush with the white containers above and below (A). I'd also like to keep the top lines between the drop-down menu (C) but remove it from the main menu/navigation (B).

Hopefully this makes sense. My style sheets a

No drop-down menu, but working spacing and white separating lines (id - navigation):
lwptsa . org/newsite/
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#navigation
{
	font-size:small;
	float: left;
	width: 1024px;
	background: #002664;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation ul ul
{
position: absolute;
background: #d1d5da;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */

}

#navigation li a
{
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { color: #a3d869; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Drop-down menu, but issue with the blue not continuing to the end and weird issues with separating lines and margins (id - menu):
lwptsa . org/newsite/dropdown . html
Code:

body
{
	margin: 20px;
	padding: 0;
	font: 100%/1.3 arial;
	font-size: medium;
	color: #000;
	background: #ccc;
}

h1, h2, h3, h4, h5, h6
{
	margin: 0 0 1em;
	line-height: 1.1;
}

h2, h3 { color: #00693e; }
h2 { font-size: 110%; }
h3 { font-size: 90%; }
h4 { font-size: 118.75%; }
h5 { font-size: 112.5%; }
p { margin: 0 0 1em;
	font: 80%/1.3 helvetica, arial, sans-serif;
 }
img { border: none; }

a:link { color: blue;text-decoration:none; }
a:visited { color: blue;text-decoration:none; }
a:hover { color: green;text-decoration:underline; }

a:link.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:visited.aside { color: #00693e;font-style:italic;text-decoration:none; }
a:hover.aside { color: #002664;font-style:italic;text-decoration:underline; }

a:link.title { color: #00693e;text-decoration:none; }
a:visited.title { color: #00693e;text-decoration:none; }
a:hover.title { color: #002664;text-decoration:underline; }

#container
{
	margin: 0 auto;
	width: 1024px;
	background: #fff;
}

#container table
{
	font: 80%/1.3 helvetica, arial, sans-serif;
}

#header
{
	font-style:italic;
	font-size:small;
	color: #00693e;
	background: #fff;
	text-align: center;
	height: 115px;
	padding: 20px 20px 20px 30px;
}

#menu ul
{
  font-family: Arial, Verdana;
  font-size:small;
  margin: 0;
  padding: 0;
  list-style: none;}

#menu ul li
{
  display: block;
  position:	relative;
  float: left;}

#menu li ul { display: none; }

#menu li a
{
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #002664;
  margin-left: 1px;
  white-space: nowrap;}

#menu ul li a:hover {   background: #00693e; }

#menu li:hover ul {
  display: block;
  position: absolute;
}

#menu li:hover li {
  float: none;
  font-size: 11px;
}

#menu li:hover a { background: #00693e; }
#menu li:hover li a:hover { color: #fff;background: #008d53; }

#content-container
{
	float: left;
	width: 1024px;
	background: #fff;
}

#content
{
	height:	inherit;
	clear: left;
	float: left;
	width: 590px;
	padding: 0 20px 0 0;
	margin: 20px 0 20px 30px;
	display: inline;
	border-right: 1px solid #00693e;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 340px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}

#aside h3 { font-size: 90%;margin: 20px 0 0 0; }
#aside p { font-size: 80%;margin: 0; }

#footer
{
	font-size: x-small;
	clear: both;
	color: #fff;
	background: #002664;
	text-align: center;
	padding: 5px;
	height: 1%;
}

#translator
{
	text-align: center;
	margin: auto;
	position: absolute;
}

Any and all help welcome. I'm trying to redesign the look and information of the PTA's website.

a.

Please help me how to center Ultimate Horizontal Drop-Down Menu Demo on DIV

ultimate.horizontal.html
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ultimate Horizontal Drop-Down Menu Demo</title>
<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

</head>
<body>

<h1>Ultimate Horizontal Drop-Down Menu Demo</h1>

<div id="catmenu">
<ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="./">Home</a></li>
	<li><span class="dir">About Us</span>
		<ul>
			<li><a href="./">History</a></li>
			<li><a href="./">Our Vision</a></li>
			<li><span class="dir">The Team</span>
				<ul>
					<li><a href="./">Brigita</a></li>
					<li><a href="./">John</a></li>
					<li><a href="./">Michael</a></li>
					<li><a href="./">Peter</a></li>
					<li><a href="./">Sarah</a></li>
				</ul>
			</li>
			<li><a href="./">Clients</a></li>
			<li><a href="./">Testimonials</a></li>
			<li><a href="./">Press</a></li>
			<li><a href="./">FAQs</a></li>
		</ul>
	</li>
	<li><span class="dir">Services</span>
		<ul>
			<li><a href="./">Product Development</a></li>
			<li><a href="./">Delivery</a></li>
			<li><a href="./">Shop Online</a></li>
			<li><a href="./">Support</a></li>
			<li><a href="./">Training & Consulting</a></li>
		</ul>
	</li>
	<li><span class="dir">Products</span>
		<ul>
			<li><a href="./" class="dir">New</a>
				<ul>
					<li><a href="./">Corporate Use</a></li>
					<li><a href="./">Private Use</a></li>
				</ul>
			</li>
			<li><a href="./" class="dir">Used</a>
				<ul>
					<li><a href="./">Corporate Use</a></li>
					<li><a href="./">Private Use</a></li>
				</ul>
			</li>
			<li><a href="./">Featured</a></li>
			<li><a href="./">Top Rated</a></li>
			<li><a href="./">Prices</a></li>
		</ul>
	</li>
	<li><a href="./">Gallery</a></li>
	<li><a href="./">Events</a></li>
	<li><a href="./">Careers</a></li>
	<li><a href="./" class="dir">Contact Us</a>
		<ul>
			<li><a href="./">Enquiry Form</a></li>
			<li><a href="./">Map & Driving Directions</a></li>
			<li><a href="./">Your Feedback</a></li>
		</ul>
	</li>
</ul>
</div>

</body>
</html>

css/dropdown/dropdown.css
Code:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 display: block;
 /*margin: 0;
 padding: 0;*/
}

ul.dropdown {
 position: inherit;
 z-index: 597;
/* float: left;*/
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
 text-align:left;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
/* left: 0;*/
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

css/dropdown/themes/default/default.ultimate.css
Code:

#catmenu{
 text-align:center;
 width:100%;
 background:#f6f6f6;
 border-style: solid;
 border-width: 1px 1px 1px 0;
 border-color: #fff #d9d9d9 #d9d9d9;
 height: 34px;
 top: 0;
 right: 0;
 margin: 0;
 padding: 0;
}



ul.dropdown {
 font-weight: bold;
}

	ul.dropdown li {
	 padding: 7px 10px;
	 border-style: solid;
	 border-width: 1px 1px 1px 0;
	 border-color: #fff #d9d9d9 #d9d9d9;
	 background-color: #f6f6f6;
	 color: #000;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 background-color: #eee;
	 color: #000;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
	ul.dropdown a:hover		{ color: #000; }
	ul.dropdown a:active	{ color: #ffa500; }


	/* -- level mark -- */

	ul.dropdown ul {
	 width: 150px;
	 margin-top: 1px;
	}

		ul.dropdown ul li {
		 font-weight: normal;
		}



/*-------------------------------------------------/
 * @section		Support Class `dir`
 * @level sep	ul, .class
 */


ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
 background-image: url(images/nav-arrow-top.png);
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(images/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(images/nav-arrow-left.png);
 background-position: 0 50%;
}

css/dropdown/themes/default/default.css
Code:

#catmenu{
 text-align:center;
 width:100%;
 background:#f6f6f6;
 border-style: solid;
 border-width: 1px 1px 1px 0;
 border-color: #fff #d9d9d9 #d9d9d9;
 height: 34px;
 top: 0;
 right: 0;
 margin: 0;
 padding: 0;
}



ul.dropdown {
 font-weight: bold;
}

	ul.dropdown li {
	 padding: 7px 10px;
	 border-style: solid;
	 border-width: 1px 1px 1px 0;
	 border-color: #fff #d9d9d9 #d9d9d9;
	 background-color: #f6f6f6;
	 color: #000;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 background-color: #eee;
	 color: #000;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
	ul.dropdown a:hover		{ color: #000; }
	ul.dropdown a:active	{ color: #ffa500; }


	/* -- level mark -- */

	ul.dropdown ul {
	 width: 150px;
	 margin-top: 1px;
	}

		ul.dropdown ul li {
		 font-weight: normal;
		}



/*-------------------------------------------------/
 * @section		Support Class `dir`
 * @level sep	ul, .class
 */


ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
 background-image: url(images/nav-arrow-top.png);
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(images/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(images/nav-arrow-left.png);
 background-position: 0 50%;
}

Thank you.

If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you'll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it's consistent in all browsers?
Here's the code for the dropdown ul ul li a:
Code:

#dropmenu { z-index:100; position:relative;}
#dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat    !important; margin: 10px 0px 0px 0px ;  position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}	
#dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
#dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }	
#dropmenu .menu ul ul li a:hover {  color:#edc951; font-weight:normal; }

Thanks

My first question relates to my earlier problem which I fixed, excpet that the code that was messing it up was "img { border-width: 0; }"

The problem w/ this is that I do not want any borders around my images, it makes the page look bad. Does anyone have a workaround?

(Note that I also tried #menu a img { border-width....etc } )

For the second question:: I've noticed that my background positions fine in IE but the rest of the images won't move to where I positioned them.

link to my page:: main
link to css page:: css page

Hi, I'm trying to make a drop-down menu using CSS and javascript. I'm posting this here because the javascript (and most of the css!) is working fine, I just need some help with the positioning.

You can see the menu so far on the website I'm beginning to develop, 10pinleague.com. As you can see the initial drop downs work as intended but when you attempt to open a submenu, that should appear to the right of the drop down menu, it appears in completely the wrong place. And for some odd reason the distance from the drop-down menus to the submenus increases more and more as you progress from Menu 1 to Menu 2 and 3.

I'm no expert at either javascript or CSS, so the drop down menu was something that I downloaded from a website, here, and then adapted to suit my site. Perhaps this wasn't intended to work as a cascading drop down menu. I just thought if I apply the same principle of wrapping the link in a div and getting that to show another new div containing the submenu it should work. And it kind of does, just in the wrong place - which I do not understand why this happens.

Here is the HTML code for the menu. (note this is not the actual code on my website, this is code that is generated from a php loop I've made. But the HTML remains the same).
Code:

<!--	  START OF MENU	  !-->

<table width='730' height='30'>
<tr>
	
	
	<td width='20%' align='center'>
	<div id='menu1a'>
	<a href='#'>Menu 1</a>
	</div>
	<div id='menu1b' class='menu_dropdown'>
	<table width='150' height='50'>
	<tr>
		<td class='padded'>
		<table width='100%' height='100%'>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu1_1a'>
			<a href='#'>Item 1</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu1_2a'>
			<a href='#'>Item 2</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu1_3a'>
			<a href='#'>Item 3</a>
			</div>
			</td>
		</tr>
		</table>
		</td>
	</tr>
	</table>
	</div>
	<script type='text/javascript'>at_attach('menu1a', 'menu1b', 'hover', 'y', 'pointer');</script>
	</td>
	
	
	<td width='20%' align='center'><div id='menu2a'>
	<a href='#'>Menu 2</a>
	</div>
	<div id='menu2b' class='menu_dropdown'>
	<table width='150' height='50'>
	<tr>
		<td class='padded'>
		<table width='100%' height='100%'>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_1a'>
			<a href='#'>Item 2</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_2a'>
			<a href='#'>Item 2</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_3a'>
			<a href='#'>Item 3</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_4a'>
			<a href='#'>Item 4   ></a>
			</div>
			
			<div id='submenu2_4b' class='menu_dropdown'>
			<table width='150' height='50'>
			<tr>
				<td class='padded'>
				<table width='100%' height='100%'>
				<tr>
					<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
					<a href='#'>Item 4a</a>
					</td>
				</tr>
				<tr>
					<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
					<a href='#'>Item 4b</a>
					</td>
				</tr>
				</table>
				</td>
			</tr>
			</table>
			</div>
			<script type='text/javascript'>at_attach('submenu2_4a', 'submenu2_4b', 'hover', 'y', 'pointer');</script>
			
			</td>
		</tr>					
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_5a'>
			<a href='#'>Item 5</a>
			</div>
			</td>
		</tr>
		</table>
		</td>
	</tr>
	</table>
	</div>
	<script type='text/javascript'>at_attach('menu2a', 'menu2b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu3a'><a href='#'>Menu 3</a></div><div id='menu3b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_1a'><a href='#'>Item 3</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu3a', 'menu3b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu4a'><a href='#'>Menu 4</a></div><div id='menu4b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_1a'><a href='#'>Item 4</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu4a', 'menu4b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu5a'><a href='#'>Menu 5</a></div><div id='menu5b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_1a'><a href='#'>Item 1</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu5a', 'menu5b', 'hover', 'y', 'pointer');</script></td>				
	
</tr>
</table>

Here is the related CSS.....but I doubt this is important.
Code:

.menu_dropdown { background-color: #a5caad; border: 1px solid #057c1f; position: absolute; visibility: hidden; font-size: small; }
.menu_dropdown A:link {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:visited {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:active {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:hover {text-decoration: underline; color: #000; font-weight: normal; }

td.menuNormal
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color:#a5caad;}

td.menuHover
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color: #87bc93;}

And here is the javascript file, that I have not modified in any way from the site I linked to above.
Code:

// <script>

// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Distribute this code, any part or any modified version of it.
//     Instead, you can link to the homepage of this code:
//     http://www.php-development.ru/javascripts/dropdown.php.
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as a part of another product provided that
//     its main use is not creating javascript menus.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind, either
// expressed or implied, including, but not limited to, the implied warranties
// of merchantability and fitness for a particular purpose. You expressly
// acknowledge and agree that use of this code is at your own risk.

function expand(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuHover";
}

function collapse(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuNormal";
}

// ----- Popup Control ---------------------------------------------------------

function at_display(x)
{
  var win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

// ----- Show Aux -----

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child );

  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }

  c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left+'px';
  c.style.visibility = "visible";
}

// ----- Show -----

function at_show()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);

  clearTimeout(c["at_timeout"]);
}

// ----- Hide -----

function at_hide()
{
  var c = document.getElementById(this["at_child"]);

  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ----- Click -----

function at_click()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible")
       at_show_aux(p.id, c.id);
  else c.style.visibility = "hidden";

  return false;
}

// ----- Attach -----

// PARAMETERS:
// parent   - id of visible html element
// child    - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
//            "hover" = you should place the mouse over the parent to show
//                      the child
// position - "x" = the child is displayed to the right of the parent
//            "y" = the child is displayed below the parent
// cursor   - Omit to use default cursor or check any CSS manual for possible
//            values of this field

function at_attach(parent, child, showtype, position, cursor)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}

Can somebody please help me get the submenus appearing next to the divs in the drop-down menus that they relate to, rather than half way across the page? Thank you very much!


PS. If you think I've asked this in the wrong place and it should be in the Javascript forum, could you move it for me? Thanks.

here is the code that I have based my menu on, http://www*dynamicdrive*com/style/csslibrary/item/suckertree-menu-horizontal . What I changed was the ".suckertreemenu ul li a" style width to auto instead of 90px. I need the style to auto so that the width of each button is proportionate to the text in the button. My problem is that in IE6 each button stretches across the entire area. Does anyone have a hack for this? Any help is greatly appreciated. Thanks

Hi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com
Im a little new to css so dont be to hard on me

Hi people.

In need of some help with this horizontal navigation.

IE7 positions everything correctly, but when testing in firefox, chrome and safari the issues then arise.

Got two images of the working styled in IE7 which is the way I was planning on having it and then the non working menu in other browsers...

Live example: please click here for live example

Code
Code:

/* Start Menu */

#topmenu {
	height: 32px;
	margin-bottom:20px;
	background: #FFFFFF url(menu_bg.png) repeat-x top;
	width: 100%;
	overflow: hidden;
	float: left;
}

#topmenu li {
	border-left: 1px solid #dedbd1;
	float: left;
	line-height: 32px;
}

#topmenu li a {
	color: #333333;
	display: block;
	margin: 0 1px 0 0;
	padding: 0 15px;
}

#topmenu li a:hover, #topmenu li.active a {
	color: #425775;
	text-decoration: none;
}

#nav, #nav ul {
	padding: 0;
	float:left;
	list-style: none;
}

#nav {
	padding: 0;
}

#nav a {
	display: block;
}

#nav li {
	float: left;
	line-height:32px;	
}

#nav li a:hover {
	background: none;
	background: #FFFFFF url(menu_bgmo.png) repeat-x top;
}

#nav li ul {
	position: absolute;
	width: 100%;
	left: -999em;
	padding-top:1px;
	overflow: hidden;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	z-index:1000;
}

#nav li ul li {
	border-bottom:1px solid #dedbd1;	
	border-left:1px solid #dedbd1;	
	border-right:1px solid #dedbd1;			
	line-height:32px;	
	width: 100%;
	overflow: hidden;
}

#nav li:hover, #nav li.hover {
	position: static;
}

#nav li ul ul {
	margin: -29px 0 0 100%;
	overflow: hidden;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul {
	left: auto;
}

#nav li:hover ul ul, #nav li:hover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul {
	left: auto;
	overflow: hidden;
}

/* Finish Menu */

Any help would be great. Thanks very much in advance!

terra

Heya!
I am really new to html - creating my first website for uni course now.
My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one.
The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome.

this is the html:
<div id="ourproject">
<ul>
<li>OUR<br>
PROJECT
<ul>
<li><a href="index.html">Project Overview</a></li>
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="participants.html">Participants</a></li>
</ul>
</li>
</ul>
</div>

and my css:

#ourproject ul {
position:relative;
color: #FFF;
text-decoration: none;
width: 102px;
top:0px;
left:0px;
height:86px;
list-style:none;
float:left;
padding-left:20px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFF;
}
#ourproject ul:hover {
color:#FF9900;
border-left-color: #F90;
padding-left:20px;
}
#ourproject ul ul {
position:relative;
visibility:hidden;
z-index:2000;
background-color:#0E1221;
font-size: 12px;
width: 602px;
display: inline-block;
height: 45px;
float: left;
top:25px;
left:-23px;
}
#ourproject ul li {
display: inline-block;
margin-right:30px;
height: 25px;
float: left;
margin-top:4px;
width: 125px;
}
#ourproject ul:hover ul {
visibility:visible;
}
#ourproject ul ul li{
width:80px;
padding: 0;
text-align:left;
}

In IE9 compatibility view, the menu is distorted.


I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts.

I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed.

I hope to get some answer soon!
Please ask any more question if you need to- i will be happy to answer.
Thanks in advance.

I am having a problem with a CSS Menu in which the sub menu items are disappearing before I am able to get my mouse over them. I have tried adjusting the padding for the nav items but it did not have any effect but to shift all of the menu elements.

Here is the html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<!--<script src="javascript/javascript.js" type="text/javascript" language="javascript"></script>-->
<title>ACS Web Group - Administration Interface</title>
</head>

<body>
<div id="pageContainer">
	<div id="header">
        <div id="headerLeft">
       	  <img src="images/acs_header.jpg" width="332" height="55" hspace="0" vspace="0" />
        </div>
        <div id="headerRight">
   	    	<a href="#"><img src="images/header_logout.jpg" width="60" height="55" hspace="0" vspace="0" border="0" /></a>
        </div>
    </div>
    <div id="menu">
        <ul id="navbar">
            <li><a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Menu 1 - Sub 1</a></li>
                    <li><a href="#">Menu 1 - Sub 2</a></li>
                </ul>
            </li>
        
            <li><a href="#">Menu 2</a>
                <ul>
                    <li><a href="#">Menu 2 - Sub 1</a></li>
                    <li><a href="#">Menu 2 - Sub 2</a></li>
                </ul>
            </li>
       
            <li><a href="#">Menu 3</a>
                <ul>
                    <li><a href="#">Menu 3 - Sub 1</a></li>
                    <li><a href="#">Menu 3 - Sub 2</a></li>
                </ul>
            </li>
	  	</ul>
    </div>
    <div id="body">
    	<div id="menuShade">
        	
      	</div>
        
    </div>
    <div id="footer" align="center">
   		<a href="http://www.ACSWebGroup.com">www.ACSWebGroup.com</a>&nbsp; 905-827-7882 
    </div>
</div>
</body>
</html>

Here is the menu.css:
Code:

/* CSS Document */

#navbar {
    margin: 0px;
    padding: 0px;
    height: 1em; }
#navbar li {
    list-style: none;
    float: left; }
#navbar li a {
    display: block;
    padding: 3px 8px;
    color: #fff;
    text-decoration: none; }

#navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
    background-color: #fff;}
#navbar li:hover ul {
    display: block;
    position: absolute;
    margin: 0px;
    padding: 0px; }
#navbar li:hover li {
    float: none; }
#navbar li:hover li a {
    /*background-color: #fff;*/
    border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
    color: #000; }
#navbar li li a:hover {
    background-color: #fff; }
#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0px;
    padding: 0px; }
#navbar li:hover li, #navbar li.hover li {
    float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    /*background-color: #fff;*/
    border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
    color: #000; }

and here is the css.css:
Code:

/* CSS Document */
html{
	height:100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
}

body{
	margin:0px;
	padding:0px;
	height:100%;
}

#pageContainer{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

#header{
	background-image:url(../images/header_background.jpg);
	background-repeat:repeat-x;
	height:55px;
	margin:0px;
	padding:0px;
	padding-right:25px;
}

#headerLeft{
	float:left;
	margin:0px;
	padding:0px;
}

#headerRight{
	float:right;
	margin:0px;
	padding:0px;
}

#menu{
	background-image:url(../images/menu_background.jpg);
	background-repeat:repeat-x;
	height:20px;
	margin:0px;
	padding:0px;
	vertical-align:top;
	overflow:hidden;
	z-index:250;
}

#menuShade{
	background-image:url(../images/menu_shading.png);
	background-repeat:repeat-x;
	position:relative;
	top:0px;
	left:0px;
	height:9px;
	margin:0px;
	padding:0px;
}

#body{
	overflow:auto;
	margin:0px;
	padding:0px;
	height:100%;
	width:100%;
	position:absolute;
	top:75px;
	z-index:100;
}

#footer{
	background-image:url(../images/footer_background.jpg);
	background-repeat:repeat-x;
	background-color:#003;
	position:relative;
	bottom:93px;
	left:0px;
	height:18px;
	margin:0px;
	padding:0px;
	font-size:10px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#BFC0AD;
	padding-top:2px;
}

Any help would be greatly appreciated.

Thanks,
LiquidBuRn

Hey guys. New to the forum and CSS in general! So that said, sorry if this seems like a noobie issue, but would love and appreciate a helping hand. Here's the situation...

Was contracted to revamp a website of a local artist. This was a very low budget job and had to bang out this site quickly to cover the little money that was available ($500). I got it done and the client is happy, but i'm noticing a positioning issue between IE and Firefox. Strangely, IE is displaying the page the way i would like and Firefox is not (backwards huh?). Anyway, the problem is the sub navigation UL appears to be indented about 50px. I want it to line up with my table. Anybody have any ideas?

Also, I understand that IE sometimes doubles padding/margin values for floated div's, but in this case I like the way it is dispalying in IE. It seems too crammed in Firefox. I'm not sure exactly how or why this happens, but would love to know what i'm doing wrong so that I can have a little bit of cross-browser consistency. Is this just a pipe dream? lol.

Here is the site: w w w . mallykhorasantchi.com/gallery.htm
(sorry for the spaces, but I can't post a url??)

Thanks a bunch for your help.

Cheers,

George
iHelp, llc

Hello,

I am having problems positioning my left menu on non IE browsers, The menu appears fine in IE, can anyone help please, I have attached my code

Code:

body {
 margin:20px;
 background:#ffffff;
 text-align:center;
 padding:0;
 }

#outer {
 text-align:left;
 border:0px solid #000000;
 width:785px;
 margin:auto;
 }

#hdr {
 height:30px;
 background:#ffffff;
 }

#bar {
 height:25px;
 background:#ffffff;
 border:solid #000000;	
 border-width:1px 0 1px 0;
 }

#bodyblock {
 position:relative;
 background: #fffff;
 width:785px;
 padding:0;
 }

#l-col {
width:204px;
height:452px;
		float:left;
		background:#fff;
		background-image:url(images/left.jpg);
		background-repeat:no-repeat;
		padding-bottom:10px; 
		}

#cont {
 width:565px;
 background:#ffffff;
 border:solid #000000;	
 border-width:0 0 0 0px;
 }
 
#middle {
		width:5px;
		float:left;
		background:#fff;
		}

#ftr {
 height:25px;
 background:#c0c0c0;
 border:solid black;
 border-width:1px 0 0 0;
 margin:0;
 }

Hello everyone, I need help with my drop down menu. There is a problem with CSS I think because it conflict with each other. I download both template and drop down menu script from somewhere else.

This is the original html template
http://www.styleshout.com/templates...ce11/index.html

This is my website with drop down menu added but it's not working
http://ghazifly.110mb.com/marketplace11/

I guess the template CSS might clash with the dropdownmenu CSS.

My index.html navigation code, I think theres nothing wrong with this code.
Code:

	<!-- navigation starts-->	
	<div  id="nav">
		<ul><ul id="jsddm">
			<li><a href="index.html">Home</a></li>
            
                         <li><a href="#">Drop Down Menu</a>
		<ul>
			     <li><a href="#">Other page</a></li>
			     <li><a href="#">jQuery Plugin</a></li>
			     <li><a href="#">Ajax Navigation</a></li>
		</ul>
	       </li>
            
			<li><a href="index.html">Archives</a></li>			
			<li><a href="index.html">About</a></li>
            			

</ul> 		
		</ul>
	<!-- navigation ends-->	

My website CSS top navigation code:
PHP Code:
/* Navigation */
#nav {
    clear: both;    
    padding: 0;            
}
#nav ul {
    float: left;
    list-style: none;
    background: #E4E4E4 url(nav.jpg) repeat-x;    
    
    padding: 0;    margin: 0 0 0 30px;
    height: 45px;
    display: inline;
    text-transform: uppercase;
}
#nav ul li {
    display: inline;
    margin: 0; padding: 0;
}
#nav ul li a {
    display: block;

    width: auto;
    margin: 0;
    padding: 0 15px;    
    border-right: 1px solid #dadada;
    border-left: 1px solid #fafafa;    
    border-bottom: none;
    color: #555;
    font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;    
    letter-spacing: 1px;
}
#nav ul li a:hover, 
#nav ul li a:active {
    color: #326ea1;
}
#nav ul li#current a {    
    background: #DBDBDB url(nav-current.jpg) repeat-x;        
} 





My dropdownmenu CSS code:
PHP Code:
/* menu styles */
#jsddm
{    margin: 0;
    padding: 0}

    #jsddm li
    {    float: left;
        list-style: none;
        font: 12px Tahoma, Arial}

    #jsddm li a
    {    display: block;
        background: #324143;
        padding: 5px 12px;
        text-decoration: none;
        border-right: 1px solid white;
        width: 70px;
        color: #EAFFED;
        white-space: nowrap}

    #jsddm li a:hover
    {    background: #24313C}
        
        #jsddm li ul
        {    margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-top: 1px solid white}
        
            #jsddm li ul li
            {    float: none;
                display: inline}
            
            #jsddm li ul li a
            {    width: auto;
                background: #A9C251;
                color: #24313C}
            
            #jsddm li ul li a:hover
            {    background: #8EA344} 





Please help me with CSS. I spend like 10 hours experimenting with CSS but still not working,

So as you can see I only pasted the right code so it should be working but somehow both CSS interfere with each other and messed up my top navigation design. Also the dropdownmenu is showing horizontally. Any help is appreciated.

Thanks in advance

Hi, I am having problems with a jQuery suckerfish drop down menu. The HTML seems fine so I can only assume the problem is with the CSS. It is a vertical drop down menu with three levels, and level two is supposed to drop down to the right hand side of level one, but it is currently dropping straight down and overlapping level one. Level three sits correctly to the right of level two though.

Here is the code:

/*** ESSENTIAL STYLES ***/
.sf-vertical, .sf-vertical * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-vertical {
line-height: 1.0;
}
.sf-vertical ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-vertical li:hover , .sf-vertical li.sfHover, .sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active{
width: 100%;
}
.sf-vertical li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-vertical li {
position: relative;
}
.sf-vertical a {
display: block;
position: relative;
}
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-vertical li:hover li ul,
ul.sf-vertical li.sfHover li ul {
top: -999em;
}
ul.sf-vertical li li:hover ul,
ul.sf-vertical li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-vertical li li:hover li ul,
ul.sf-vertical li li.sfHover li ul {
top: -999em;
}
ul.sf-vertical li li li:hover ul,
ul.sf-vertical li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}

/*** DEMO SKIN ***/
.sf-vertical {
float: left;
margin-bottom: 1em;
}
.sf-vertical a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
}
.sf-vertical a, a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #13a;
}
.sf-vertical li {
background: #BDD2FF;
}
.sf-vertical li li {
background: #AABDE6;
}
.sf-vertical li li li {
background: #9AAEDB;
}
.sf-vertical li:hover, .sf-vertical li.sfHover,
.sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active {
background: #CFDEFF;
outline: 0;
}

/*** arrows **/
.sf-vertical a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position:relative;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: -10px 0; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-vertical ul .sf-sub-indicator { background-position: -10px 0; }
.sf-vertical ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-vertical ul a:focus > .sf-sub-indicator,
.sf-vertical ul a:hover > .sf-sub-indicator,
.sf-vertical ul a:active > .sf-sub-indicator,
.sf-vertical ul li:hover > a > .sf-sub-indicator,
.sf-vertical ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul.sf-shadow-off {
background: transparent;
}

Any help or suggestions would be really appreciated. Let me know if you need any additional information.