CSS - No Background In Ff On Parent Div

Please look at this page -
http://hometown.tmhdesign.com/ask.asp?faq=9

See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7

I just noticed it does it also on this page

http://hometown.tmhdesign.com/staff.asp

Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ......

Code:

<div style="margin:0px;padding:25px 30px;text-align:left;">
 <img style="text-align:center;" src="...">
</div>

Please look at this page http://osake.garychus.com/menu2.asp

I am trying to wrap a div (red border) around each category on this restaurant menu. For some reason the code looks right but the red border does not enclose the entire category section(s).

I validated the html but think the issue is css related. Any help is appreciated.

http://weightlossforever.ca/


Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it.

Thoughts?

Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ......

Code:

<div style="margin:0px;padding:25px 30px;text-align:left;">
 <img style="text-align:center;" src="...">
</div>

I am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV.

Code:

<div id="horzmenu">
<ul id="horznavmenu">
  <li><a href='rooms.php'>Accomodations</a></li>
  <li class='hot'>Location & Info		 
    <ul>
	<li><a href='/otherprops.php'>Other Properties</a></li>
	<li><a href='/news.php'>News & Photos</a></li>
    </ul>
  </li>
  <li><a href='booking.php'>Booking</a></li>
</ul>
</div> 

So if I were to wish to style this new UL and its LI's do I refer to:
The parent UL as in: #horznavmenu ul ul {
The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{

Or? Thanks in advance for any feedback or suggested reading...

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh

Hi guys, i have a problem with my CSS, i think there's something i'm not quite understanding. I should have a header which is one long div separated into three equal sized columns (three divs), each contain text which is inside its own div. Here's my code:

HTML

Code:

<body> <Div class="Header">  <Div class="Left">  <div class="Logo"><img src="Images/ACE.png" alt="Logo" height="36px" width="56px"/> <div class="LeftText"> AIR CHARTER EXPRESS </div> </div>  </Div>  <Div class="Middle"> <div class="RightText"> Left </div> </Div>  <Div class="Right"></Div> <div class="MiddleText"> Right </div>  </Div>   </body>

and css:

Code:

@charset "utf-8"; /* CSS Document */  .Header { 	position:relative; 	height:40px; 	width:900px; 	border:solid 1px black; 	margin-left:200px; 	/*background-color:#000000;*/ }  .Left { 	position:relative; 	height:40px; 	width:299px; 	/*background-color:aqua;*/ 	border-right:solid 1px black; 	float:left; 	display:inline; 	 }  .LeftText { 	display:inline; 	Height:38px; 	width:200; 	position:relative; 	top:-11px; 	border:solid 1px black; }   .Middle /* actually right div */ { 	position:relative; 	height:40px; 	width:299px; 	/*background-color:yellow;*/ 	float:right; 	 	 }  .MiddleText { 	display:inline; 	Height:38px; 	width:200px; 	position:relative; 	border:solid 1px black; 	margin-left:60px; 	top:10px; 	 }   .Right /* actually middle div */ { 	position:relative; 	height:40px; 	width:300px; 	/*background-color:green;*/ 	float:right; 	border-right:solid 1px black; }  .RightText { 	display:inline; 	Height:38px; 	width:200px; 	position:relative; 	border:solid 1px black; 	margin-left:60px; 	top:10px; 	 }     .Logo { 	Height:36px; 	width:66px; 	padding-top:2px; 	display:inline; 	 }

its actually a little confusin seeing as the middle div appears on the right and the right div in the middle but i dont want to change any of the names in case it breaks so i'll live with!

everything works fine except for the middleText div is not appearing inside it parent (right div) but on the outside of the whole header div.

Can somebody please tell me why this is happening?thanks.

should have read more in the forum. sorry.

hi, i have the following css

Code:

#content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }

#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }

and my xhtml looks like

Code:

<div id="content">
 <div id="mainbody">
</div>
</div>

basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page.

now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div?

thanks

I have elements in a certain class and they may have child elements. I want to position the child so that it's TOP is at the bottom of the parent. Right now its top is at a fixed place relative to the parent. The parent is variable height. So in my css I have
ul.parent ul {
top: <bottom of parent>
}

How do I refre to it?

I've been searching for a few days, but I haven't found a solution to my problem. How do I get my parent DIV to expand to contain all of my content beyond the viewport?

CSS:
Code:

html {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	min-height: 100%;
}
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	min-height: 100%;
}
.page {
	background-color: #dddddd;
	margin-left: -390px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #9CB0C0;
	border-right-color: #9CB0C0;
	border-bottom-color: #9CB0C0;
	border-left-color: #9CB0C0;
	position: absolute;
	height: 100%;
	min-height: 100%;
	width: 780px;
	left: 50%;
	top: 0;

}
.header {
	position: absolute;
	height: 158px;
	width: 764px;
	background-color: #FFFFFF;
	left: 7px;
	top: 0px;
}
.content {
	position: absolute;
	left: 7px;
	top: 159px;
	background-color: #9CB0C0;
	height: 821px;
	width: 764px;
	margin-bottom: 34px;

}
.footer {
	background-color: #415569;
	height: 34px;
	width: 764px;
	left: 7px;
	bottom: 0px;
}

And the HTML:
Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/test.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="lPage" style="position:absolute; z-index:1" class="page"> 
  <div id="lContent" style="position:absolute; z-index:2;" class="content"></div>
  <div id="lHeader" style="position:absolute; z-index:1" class="header"></div>
  <div id="lfooter" style="position:absolute; z-index:3" class="footer"></div>
</div>
</body>
</html>

I've searched through a few of the threads here, but haven't been able to find an answer either.

Thanks,

Brent

Thanks for taking the time to read my question.

I've been searching the web on how to fix this but haven't got anything yet.

In IE, my nested div (class="BioContent") stays within the parent container (id="BioBox"), but does not in FF. Right now I am using width: 100%; I've tried defining the width in pixels, but if I get it to work in FF, then it isn't wide enough in IE.

Any ideas?

Thanks for your help,


Brad


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">
<!-- Created on: 7/21/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<link href="Junk.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="WP.js"></script>
</head>
<body>
<div id="FaderBar">
	<div id="FaderBarWP">Warren Persowich</div>	
	<div><img id="FaderBarImg" src="images/audience.jpg" alt=""></div>
	<div id="FaderBarHC">Humor Consultant</div>
</div>	
<!--<p/>-->
<div id="MainBox">
	<div id="LeftBox">
		<div id="BioBox">
			<div id="Bio0" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[0],0)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[0],0)";>5 Star Rating on bit aired on CBC</div>
			<div id="Bio1" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[1],1)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[1],1)";>Licenced Psychologist</div>		
			<div id="Bio2" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[2],2)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[2],2)";>National Television Debut - Fall of 2006</div>		
			<div id="Bio3" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[3],3)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[3],3)";>XM Satelite Bit</div>		
			<div id="Bio4" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[4],4)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[4],4)";>Instructor of Stand-Up Comedy</div>		
			<div id="Bio5" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[5],5)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[5],5)";>Manitoba Theatre For Young People</div>		
			<div id="Bio6" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[6],6)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[6],6)";>Cancer Survivor</div>		
		</div>	 
		<div id="BioFooter">Move cursor over text to read on...</div>
		<div id="Broadcast">		
		 <!-- begin embedded WindowsMedia file...-->
      			<OBJECT id='mediaPlayer' width="320" height="285" 
      				classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' 
      				codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
      				standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
		      	<param name='fileName' value="http://servername/path/to/media.file">
      			<param name='animationatStart' value='true'>
		      	<param name='transparentatStart' value='true'>
      			<param name='autoStart' value="true">
		      	<param name='showControls' value="true">
      			<param name='loop' value="true">
		      	<EMBED type='application/x-mplayer2'
        			pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
		        	id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1' 
        			bgcolor='darkblue' showcontrols="true" showtracker='-1' 
		        	showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="320" height="285"
        			src="http://servername/path/to/media.file" autostart="true" designtimesp='5311' loop="true">
		      	</EMBED>
      			</OBJECT>
        		<!--<a href="http://servername/path/to/media.file" style='font-size: 85%;' target='_blank'>Launch in external player</a>-->
		</div>
		</div>
	<div id="CenterBox"><img class="HeadShot" src="ColourTest1.JPG" width="122" height="212" alt=""/></div>
	<div id="RightBox"><ul>
		<li class="LB1TOP"><a href="#">Seminars</a></li>
		<li class="LB2"><a href="#">Stand-Up</a></li>
		<li class="LB3"><a href="#">Intro Psych</a></li>
		<li class="LB4"><a href="#">Selected Transcripts</a></li>
		<li class="LB3"><a href="#">Broadcast Archives</a></li>
		<li class="LB2"><a href="#">Links</a></li>
		<li class="LB1"><a href="#">Pricing & Inquiries</a></li>
		<!--<li class="LB4"><a href="#">Link #8</a></li>
		<li class="LB3"><a href="#">Link #9</a></li>
		<li class="LB2"><a href="#">Link #10</a></li>
		<li class="LB1"><a href="#">Link #11</a></li>-->
	</ul></div>	
</div>	
<div id="Signature"><a class="Sig" href="#">Manic Web Designs</a></div>
</body>
</html>

CSS:
Code:

body {
/*background: #E2E2E2;*/
background: #000000;
margin-top: 5px;
}


#MainBox {
/*background-color: #ECF9FF;*/
background-color: #8C8C8C;
margin: 0 auto;
width: 780px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/	  
overflow: hidden;
}

#FaderBar {		
/*background-color: #ECF9FF;*/	 
background-color: #8C8C8C;
margin: 0 auto;
height: 80px;
width: 780px;  
border: 5px double #ffffff;
/*background-image:url('HeaderImg.png');*/
}

#FaderBarWP {
float: left;
height: 40px;
width: 300px;  
margin-left: 15px;
margin-top: 5px;   
font-size: 40px; 
/*background-color: red;*/
}

#FaderBarHC {
float: left;
height: 55px;
width: 430px;
font-size: 25px;
margin-left: 45px;
/*background-color: aqua;*/
}

#FaderBarImg {
float:right;
height: 105px;
width: 199px;

}  

#LeftBox {
width: 340px;
/*height: 500px;*/
float: left;
/*background-color: aqua;*/
}

#CenterBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: red;*/
}

#RightBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: yellow;*/
}

#BioBox {
width: 295px;
height: 250px;
background-color: #F2F2F2;
padding-top: 5px;	
border-color: #dcdcdc;
border-style: solid;
border-width: 2px;	 
float: right;	 
margin: 5px 10px 0px 0px;	
}

.BioContent {
width: 100%;
float: left;  
font-size: 11px; 
margin-bottom: 5px;
border-top: 1px dashed #dcdcdc; 
border-bottom: 1px dashed #dcdcdc;	  
padding: 5px;
}

#BioFooter {
float: right;
width: 100%;
text-align: right;
font-size: 12px;
color: gray;
margin-bottom: 15px;
}

#Broadcast {
height: 300px;
width: 330px;
float: right;
padding: 0px 0px 0px 0px;
}

ul li {
float: right;
height: 20px;
margin-bottom: 25px;
border-color: #dcdcdc;
border-width: 2px;
border-style: solid;
text-align: center;	  
width: 150px; 
background-color: #F2F2F2;
list-style-type: none;
}

.LB1TOP {
margin-right: 30px;
margin-top: 35px;
}

.LB1 {
margin-right: 30px;
}

.LB2 {
margin-right: 25px;
}

.LB3 {
margin-right: 20px;
}

.LB4 {
margin-right: 15px;
}

.LB5 {
margin-right: 10px;
}

.LB6 {
margin-right: 5px;
}

ul li a {
display: block;
}

ul li a:link {
text-decoration: none;
color: black;
}

ul li a:visited {
text-decoration: none;
color: black;
}

ul li a:hover {
background-color: #737373;
color: white;
font-weight: bold;
}

ul li a:active {
text-decoration: none;
}



img.HeadShot {
margin: 125px 0px 0px 50px;
}
  
#Signature {
background-color: #E2E2E2;
margin: 0 auto;
width: 780px;
padding-top: 10px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/	  
overflow: hidden;	 
text-align: right;
}	  

a.ReadOn:link {
text-decoration: none; 
color: black;
}

a.ReadOn:visited {
text-decoration: none;
color: black;
}

a.ReadOn:hover {
text-decoration: none;
color: black;
}

a.ReadOn:active {
text-decoration: underline;
color: black;
}

.Sig {
color: #808080;
font-size: 10px;
} 

a.Sig:link {
text-decoration: none;
}

a.Sig:visited {
text-decoration: none;
}

a.Sig:hover {
text-decoration: overline underline;
}

a.Sig:active {
text-decoration: none;
}

Hey everyone,

I am working on a design of mine, and so far it is coming along very well. The problem is, when I am working with the menu, I cannot get the sub menu to appear directly below the parent. Here is a screen shot of what is happening. I hovered over the 2nd menu item, and the sub menu appeared under the 1st. I know why it is doing it, I just can't seem to fix it. Here is my code:
html4strict Code:
Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/JavaScript" src="jquery.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } a:focus, a img { outline: 0 none; border: 0 none; } a { text-decoration: none; color: #8D1D45; } html,body { text-align: center; background-color: #C5CED5; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 13px; height: 100%; width: 100%; } #container { width: 852px; background-color: #FFFFFF; text-align: justify; margin: 0 auto; overflow: hidden; height: auto; } #header { background-image: url( http://img103.imageshack.us/img103/8229/header02bd6.jpg ); background-repeat: no-repeat; height: 130px; } #header h1 { color: #8D1D45; letter-spacing: -0.1em; font-size: 26px; margin-left: 300px; padding-top: 50px; } #header span { color: #687788; } #menu { width: 100%; margin-top: 6px; margin-bottom: 5px; } #menu li { display: inline; margin-right: -5px; } #menu a { background-color: #FFF200; opacity: 0.7; filter: alpha(opacity=70); padding: 5px 76.3px; border: 1px solid #000000; } #menu ul ul { display: none; float: left; margin-right: 4px; } #menu ul ul li { display: block; line-height: 30px; } #menu ul ul li a { display: block; max-width: 110px; padding: 5px 80px; } #menu ul ul li.first { margin-top: 6px; } </style> <script type="text/javascript"> function show( id ) { $( "#" + id ).show("slow"); } function hide( id ) { $( "#" + id ).hide("slow"); } </script> </head> <body> <div id="container"> <div id="header"> <h1>ryon.<span>hunter</span></h1> </div> <div id="menu"> <ul> <li><a onmouseover="show('sub1')" onmouseout="hide('sub1')" href="">Tutorials</a></li> <li><a onmouseover="show('sub2')" onmouseout="hide('sub2')" href="">Tutorials</a></li> <ul id="sub1"> <li class="first"><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href="">CSS</a></li> <li><a href="">X/HTML</a></li> </ul> <ul id="sub2"> <li class="first"><a href="">PHP</a></li> <li><a href="">MySQL</a></li> <li><a href="">CSS</a></li> <li><a href="">X/HTML</a></li> </ul> </ul> </div> </div> </body> </html>

  

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


    "http://www.w3.org/TR/html4/strict.dtd">


 <html>


  <head>


   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


   <meta http-equiv="Content-Style-Type" content="text/css">


   <meta http-equiv="Content-Script-Type" content="text/javascript">


   <title></title>


   <script type="text/JavaScript" src="jquery.js"></script>


   <style type="text/css">


   * {


    margin: 0;


    padding: 0;


   }


   a:focus, a img {


    outline: 0 none;


    border: 0 none;


   }


   a {


    text-decoration: none;


    color: #8D1D45;


   }


   html,body {


    text-align: center;


    background-color: #C5CED5;


    font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif;


    font-size: 13px;


    height: 100%;


    width: 100%;


   }


   #container {


    width: 852px;


    background-color: #FFFFFF;


    text-align: justify;


    margin: 0 auto;


    overflow: hidden;


    height: auto;


   }


   #header {


    background-image: url( http://img103.imageshack.us/img103/8229/header02bd6.jpg );


    background-repeat: no-repeat;


    height: 130px;


   }


   #header h1 {


    color: #8D1D45;


    letter-spacing: -0.1em;


    font-size: 26px;


    margin-left: 300px;


    padding-top: 50px;


   }


   #header span {


    color: #687788;


   }


   #menu {


    width: 100%;


    margin-top: 6px;


    margin-bottom: 5px;


   }


   #menu li {


    display: inline;


    margin-right: -5px;


   }


   #menu a {


    background-color: #FFF200;


    opacity: 0.7;


    filter: alpha(opacity=70);


    padding: 5px 76.3px;


    border: 1px solid #000000;


   }


   #menu ul ul {


    display: none;


    float: left;


    margin-right: 4px;


   }


   #menu ul ul li {


    display: block;


    line-height: 30px;


   }


   #menu ul ul li a {


    display: block;


    max-width: 110px;


    padding: 5px 80px;


   }


   #menu ul ul li.first {


    margin-top: 6px;


   }


   </style>


   <script type="text/javascript">


    function show( id )


    {


     $( "#" + id ).show("slow");


    }


    function hide( id )


    {


     $( "#" + id ).hide("slow");


    }


   </script>


  </head>


  <body>


   <div id="container">


    <div id="header">


     <h1>ryon.<span>hunter</span></h1>


    </div>


    <div id="menu">


     <ul>


      <li><a onmouseover="show('sub1')" onmouseout="hide('sub1')" href="">Tutorials</a></li>


      <li><a onmouseover="show('sub2')" onmouseout="hide('sub2')" href="">Tutorials</a></li>


       <ul id="sub1">


        <li class="first"><a href="">PHP</a></li>


        <li><a href="">MySQL</a></li>


        <li><a href="">CSS</a></li>


        <li><a href="">X/HTML</a></li>


       </ul>


       <ul id="sub2">


        <li class="first"><a href="">PHP</a></li>


        <li><a href="">MySQL</a></li>


        <li><a href="">CSS</a></li>


        <li><a href="">X/HTML</a></li>


       </ul>


     </ul>


    </div>


   </div>


  </body>


 </html> 

I am only testing it in FF2 at the moment, I will test other browsers when I get it working in FF.

P.S. Does anyone know how to get my menu to stay when the menu items are being hovered over? So far it just goes away when I take the cursor off of the top menu.