Trouble with Dropdown in webpage

HTML & CSS
1

I am experimenting with different menus. My first one - which has a Dropline submenu - works quite well when I pasted it in between the <div id=“header”> tags.

However, when I switch to a Dropdown menu, the Left column is creeping up and the layout is all messed up…

Note sure if all of my code will fit here?!

index_dd.html


<!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">
<head>
	<title>3 equalising column min-max with sticky footer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="css/pagelayout.css">
	<link type="text/css" rel="stylesheet" href="css/dropdown.css">
</head>
<body>
<div id="wrapper" class="clearfix">
	<div id="inner">
		<div id="header">
			HEADER
			<!-- DROP-DOWN MENU -->
			<ul id="nav">
				<li class="current"><a href="#">News</a>
					<ul>
						<li><a href="#">Breaking</a></li>
						<li><a href="#">Local</a></li>
						<li><a href="#">U.S.</a></li>
						<li><a href="#">World</a></li>
					</ul>
				</li>
				<li><a href="#">Politics</a>
					<ul>
						<li><a href="#">Local</a></li>
						<li><a href="#">White House</a></li>
						<li><a href="#">Congress</a></li>
						<li><a href="#">Gov't</a></li>
						<li><a href="#">Elections</a></li>
					 </ul>
					</li>
				<li><a href="#">Business</a>
					<ul>
						<li><a href="#">Economy</a></li>
						<li><a href="#">Markets</a></li>
						<li><a href="#">Investing</a></li>
						<li><a href="#">Smal Biz</a></li>
						<li><a href="#">Jobs</a></li>
						<li><a href="#">Real Estate</a></li>
					 </ul>
				</li>
				<li><a href="#">Sports</a>
					<ul>
						<li><a href="#">NBA</a></li>
						<li><a href="#">MLB</a></li>
						<li><a href="#">NFL</a></li>
						<li><a href="#">NHL</a></li>
						<li><a href="#">NCAAF</a></li>
						<li><a href="#">Golf</a></li>
					</ul>
				</li>
				<li><a href="#">Travel</a>
					<ul>
						<li><a href="#">U.S.</a></li>
						<li><a href="#">S.America</a></li>
						<li><a href="#">Europe</a></li>
						<li><a href="#">Africa</a></li>
						<li><a href="#">Asia</a></li>
						<li><a href="#">Australia</a></li>
						<li><a href="#">Tips</a></li>
					</ul>
				</li>
				<li><a href="#">Weather</a>
					<ul>
						<li><a href="#">Current</a></li>
						<li><a href="#">Forecast</a></li>
						<li><a href="#">U.S.</a></li>
						<li><a href="#">News</a></li>
						<li><a href="#">Records</a></li>
					</ul>
				</li>
				<li><a href="#">Opinion</a>
					<ul>
						<li><a href="#">Debbie D.</a></li>
						<li><a href="#">Frank S.</a></li>
						<li><a href="#">Suzt Q.</a></li>
						<li><a href="#">Jane D.</a></li>
						<li><a href="#">Staff</a></li>
						<li><a href="#">Reader Comments</a></li>
					</ul>
				</li>
			</ul>		<!-- END OF HEADER -->

		</div>
		<div id="left">
			<p>
				Other content goes here : Other content goes here : 			</p>
		</div>
		<div id="middle">
			<div id="content">
				<h2>MAIN CONTENT</h2>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
			</div>
		</div>
		<div id="right">
			<p>
				Adverting goes here : Adverting goes here : Adverting goes here :
			</p>
		</div>
	</div>
	<div id="l"></div>
	<div id="r"></div>
	<!-- l & r are the left and right column colours only - they hold no content -->
</div>
<div id="footer">
	<p>footer</p>
</div>
</body>
</html>

dropdown.css


#nav, #nav ul{
		position: relative;											/* Set containing block for AP sub ul */
		width: 630px;
		margin: 0;
		padding: 0;
		list-style: none;
}

#nav li{
		float: left;
		width: 90px;
		color: #4682B4;													/* Steel Blue (darker) */
		background: #E6E6FF;										/* Blue Gray (lighter) */
		text-align: center;
}

#nav li:hover{
		background: #4682B4;										/* Steel Blue (darker) */
}

#nav li:hover a{
		color: #FFF;														/* White */
}

#nav a{
		float: left;
		padding: 1em 0;
		text-decoration: none;
		text-transform: uppercase;
		color: #4682B4;													/* Steel Blue (darker) */
		font-weight: 900;
}


/* ------ Submenu ------ */
#nav li ul{
		position: absolute;
		width: 90px;
		left: 0;
		top: 100%;
		margin-left: -999em;										/* Hide the sub ul */
}


#nav li li a{
		width: auto;														/* Adjust submenu for longer list items */
		min-width: 90px;
		padding: 0.5em 0;
		text-transform: none;
}

#nav li:hover ul{
		margin-left: 0;													/* Reveal the sub ul on li:hover */
}

#nav li:hover ul li a{
		color: #4682B4;													/* Reset li:hover a on sub li */
																						/* Steel Blue (darker) */
}

#nav li ul li:hover{
		background: #4682B4;										/* Steel Blue (darker) */
}

#nav li ul li a:hover{
		color: #FFF}														/* White */

pagelayout.css


html, body{
	height: 100%;
	margin: 0;
	padding: 0;
}

body{
	background: #333;
}

h1, h2, h3, h4, h5, h6, p, form{
	margin: 0.5em;
/*	margin: 0 0 .7em; */
}

p{
	padding: 5px;
}

h1, h2{
	text-align: center;
}

#wrapper{
	position: relative;
	z-index: 0;
	margin: 0px auto;
	margin-top: -60px;												/* Make space for Footer */
	min-width: 960px;
	max-width: 1200px;
	min-height: 100%;
	background: #FFF;													/* Middle Column */
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	text-align: left;
}

#header{
	position: relative;
	z-index: 2;
	clear: both;
/*	background: #ccc; */
	background: #E6E6FF;											/* Blue Gray (lighter) */
	width: 100%;															/* Width of Viewport */
	border-top: 60px solid #FFF;							/* Soak up negative margin in Wrapper
																								used to make way for Footer */
	border-bottom: 1px solid #000;
	padding: 0 0 1px;
	color: #000;
}

#footer{
	position: relative;
	z-index: 2;
	clear: both;
	min-width: 700px;
	max-width: 1200px;
	height: 59px;
	margin: auto;
	border-top: 1px solid #000;
	background: #CCC;
	color: #000;
	font-size: 11px;
	text-align: center;
}

#left{
	position: relative;
	z-index: 2;
	float: left;
	width: 150px;
	font-size: 11px;
}

/*if we float the middle column we avoid the ie6 3 pixel jog and also keep columns in normal source order (left,middle right) but we need to use a negative margin offset to make it all fit.*/
#middle{
	float: left;
	width: 100%;
	margin-right: -300px;											/* Width of left and right columns */
}

#content{
	margin-right: 300px;											/* Width of left and right columns */
	padding: 2em;
}

#right{
	position: relative;
	z-index: 2;
	float: right;
	width: 150px;
	font-size: 11px;
}

/* Following  2 absolute columns just used to hold column colors
		While removed from the flow, they do not hold content, and are
		just stuck to the parent container and set at 100% height.
		This ensures that they grow with the parent container. */
#l{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	clear: both;
	width: 149px;
	height: 100%;
	background: #EEE;													/* Left column color*/
	border-right: 1px solid #000;
}

#r{
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	clear: both;
	width: 150px;
	height: 100%;
	background: #DDD;													/* Right column color*/
	border-left: 1px solid #000;
}

* html #l, * html #r{
		height: 999em;
		bottom: -1px;
}

/* clear without structural mark-up */
.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix{
	display: inline-block;
}
/* mac hide - force layout in ie \\*/

.clearfix{
	display: block;
}
/* End hide */

/*Opera Fix*/
body:before{																/* thanks to Maleika (Kohoutec)*/
	content: "";
	height: 100%;
	float: left;
	width: 0;
	margin-top: -32767px;											/* thank you Erik J - negate effect of float*/
}

#inner{
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 3;
}

Thanks,

Debbie

2

I stripped out all filler text from the different sections as well as the UL in the <div id=“header”>.

If I put a simple…


			<div id="header">
				<!-- DROP-DOWN MENU -->
				MENU
				<ul id="nav">
					<li>Item 1</li>
				</ul>
			</div>

it spills over the Header which is not expanding.

That is where the problem is at, but honestly I am not sure that I fully digested Paul’s fancy layout using “positioned” DIVs.

What is going on?

Debbie

3

However, when I switch to a Dropdown menu, the Left column is creeping up and the layout is all messed up…
Hi Debbie,

If you remember, I explained why I was using the #nav:after rules with the dropline version. The reason was to contain the floated LI without using overflow:hidden; I was also using that because there was not a defined height, it was a calculated height that was flexible with font-sizes.

Now you also have some stacking contexts to deal with in Paul’s layout. There is a z-index:2 set on the left and right floated columns. You need to layer the #header div above them since you have it as the parent of your ul#nav.

I removed the width from the LI and set a width on the second level UL and anchors. The LI is the one that gets RP so it becomes the containing block when you are dealing with DropDown menus.

Here are the changes I made in blue and commented out sections in red.

#header {
    position: relative;
   [COLOR=Blue] z-index:3;/*layer above floated columns*/[/COLOR]
    clear: both;
    /*  background: #ccc;*/
    background: #E6E6FF;/* Blue Gray (lighter) */
    width: 100%;/* Width of Viewport */
    border-top: 60px solid #FFF;/* Soak up negative margin in Wrapper used to make way for Footer */
    border-bottom: 1px solid #000;
    padding: 0 0 1px;
    color: #000;
}

#nav, #nav ul {
    [COLOR=Red]/*position: relative;/*move to LI for Drop-DOWN menu*/[/COLOR]
    [COLOR=Blue]min-height:0;/*haslayout IE7 for float containment*/[/COLOR]
    margin: 0;
    padding: 0;
    list-style: none;
    [COLOR=Blue]background: #E6E6FF;/* Blue Gray (lighter) */[/COLOR]
}

[COLOR=Blue]#nav:after {/* Contain floats without overflow */
    content: "";                                                       
    clear: both;
    display: block;
    height: 0;
    font-size: 0;
}
[/COLOR]
#nav li {
    [COLOR=Blue]position:relative;/* Set containing block for AP sub ul */[/COLOR]
    float: left;
    [COLOR=Red]/*width: 90px; don't set a width on the LI*/
    /*color: #4682B4;/* is set on anchor*/
    /*background: #E6E6FF;/* moved to #nav, #nav ul[/COLOR][COLOR=Red] */[/COLOR]
    text-align: center;
}
#nav a {
    float: left;
    [COLOR=Blue]padding: 1em;[/COLOR][COLOR=DarkGreen]/*content driven width + padding*/[/COLOR]
    text-decoration: none;
    text-transform: uppercase;
    color: #4682B4;/* Steel Blue (darker) */
    font-weight: 900;
}
#nav li:hover {
    background: #4682B4;/* Steel Blue (darker) */
}
#nav li:hover a {
    color: #FFF;
}

/* ------ Submenu ------ */
#nav ul {
    position: absolute;
    [COLOR=Blue]width: 120px;/*same as "li li a"*/[/COLOR]
    left: 0;
    top: 100%;
    margin-left: -999em;/* Hide the sub ul */
}
#nav li li a {
    [COLOR=Blue]width: 120px;/*set fixed width when using dropdown*/[/COLOR]
    padding: 0.5em 0;
    text-transform: none;
}
#nav li:hover ul {
    margin-left: 0;/* Reveal the sub ul on li: hover */
}
#nav li:hover li a {
    color: #4682B4;/* Steel Blue (darker) */
}
#nav li li:hover {
    background: #4682B4;/* Steel Blue (darker) */
}
#nav li li a:hover {
    color: #FFF
}