No replies
jmeyer9807
Offline
newbie
Last seen: 12 years 6 weeks ago
Joined: 2009-08-15
Posts: 1
Points: 0

Thanks for reading!
The page I am creating is broken down into three columns using css:

#left {
	background: #ffa77f;
	width: 175px; height: 600px;
	float: left;
}
 
#center {
	background: #faebd7;
	width: 550px; height: 600px;
	float: left;
}
 
#right {
	background: #ffa77f;
	width: 175px; height: 600px;
	float: right;
}

I have placed a drop down, or flyout CSS menu in the right column. Not sure if that code is relevant, but here is it :

#menu, #menu ul {
	list-style-type: none;
}
 
#menu, #menu * {
	padding: 0;
	margin: 0;
}
 
#menu li.header {
	float: left;
	margin: -1px;
	text-align: center;
	padding: 45px 15px;
}
 
#menu li.header a {
	display: block;
	padding: 0px;
	width: 145px;
	height: 40px;
	text-decoration: none;
	background-color: #FFEFBF;
	line-height: 40px;
	color: #000000;
}
 
#menu li.header ul {
	display: none;
	text-align: center;
	text-decoration: none;
}
 
#menu li.header:hover ul {
	display: block;
}
 
#menu li.header ul li a {
	padding: 0px;
	height: 40px;
	text-decoration: none;
	background-color: #FFE3BF;
}
 
#menu li.header ul li a:hover {
	background-color: #DDC586
}

The navigation is a single link, that when a mouseover occurs, a drop menu of four links appears. However, I need to place an image below this menu, and allow the expanding navigation, or drop down menu, to drop over the image.

#right img {
	float: none;
	padding: 5px;
}

Instead, it is pushing the image down the page with the menu. I have tried absolute positioning, but unless the screen is a specific size, it won't stay where I need it to.
I hope I have explained this well enough... Any help would be appreciated.