How to show my drop down menu above my content DIV?

Hi everybody,

I've tried to integrate a css drop down menu into my website template but when the menu drops down, it's cut off at the end of the header DIV and doesn't show above the content DIV (named "colmask_threecol").

Could you tell me what I have to change in my CSS to solve that problem?

Thanks in advance!

HTML:
 
<body>
    <div id="header">
        <table width="100%" cellpadding="5">
            <tr>
                <td valign="top" align="center">
                    <div id="ctl00_MenuContent_menu">
			<ul id="mymenu" class="topmenu">
			    <li class="topfirst">
				<a href="#" style="height:35px;line-height:35px;"><img src="images/home.png" alt="Home" />Home</a>
   			    </li>
			    <li class="topmenu">
				<a href="#" style="height:35px;line-height:35px;"><span><img src="images/menu.png" alt="Menu 1"/>Menu 1</span></a>
			        <ul>
				    <li class="subfirst">
					<a href="#"><img src="images/item.png" alt="Sub Menu 1.1"/>Sub Menu 1.1</a>
				    </li>
				    <li>
					<a href="#"><img src="images/item.png" alt="Sub Menu 1.2"/>Sub Menu 1.2</a>
				    </li>
				</ul>
			    </li>
			    <li class="topmenu">
				<a href="#" style="height:35px;line-height:35px;"><span><img src="images/menu.png" alt="Menu 2"/>Menu 2</span></a>
				<ul>
			            <li class="subfirst">
					<a href="#"><img src="images/item.png" alt="Sub Menu 2.1"/>Sub Menu 2.1</a>
				    </li>
				</ul>
			    </li>						
			    <li class="toplast">
				<a href="javascript:__doPostBack('ctl00$LoginContent$LoginStatus1$ctl00','')" style="height:35px;line-height:35px;"><img src="images/logout.png" alt="Logout" />Logout</a>
			    </li>
			</ul>
		    </div>
                </td>
                <td valign="top" align="right">
                    <img src="images/logo.gif" alt="Logo" />
                </td>
            </tr>
        </table>
	</div>        
	<div class="colmask threecol">
		<div class="colmid">
			<div class="colleft">
				<div class="col1">
					<!-- Column 1 start -->
					<div id="ctl00_MainContent_AuthenticatedMessagePanel">
						<span id="ctl00_MainContent_WelcomeBackMessage">
							<h1>Test page</h1>
							<p>Lorem ipsum dolor sit amet</p>
						</span>    
					</div>
					<!-- Column 1 end -->
				</div>
				<div class="col2">
					<!-- Column 2 start -->
					<!-- Column 2 end -->
				</div>
				<div class="col3">
					<!-- Column 3 start -->  
					<!-- Column 3 end -->
				</div>
			</div>
		</div>
	</div>
	<div id="footer">
		<p>Lorem ipsum dolor sit amet</p>
	</div>
</body>

Open in new window


CSS:
 
html {
	overflow:auto;
}

body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	min-width:800px;		/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;
}

a {
	color:#369;
}

a:hover {
	color:#fff;
	/*background:#369;*/
	text-decoration:none;
}

h1, h2, h3 {
	margin:.8em 0 .2em 0;
	padding:0;
}

p {
	margin:.4em 0 .8em 0;
	padding:0;
}

img {
	margin:10px 0 5px;
}

#ads img {
	display:block;
	padding-top:10px;
}

#header {
	clear:both;
	float:left;
	width:100%;
	background-image:url("images/back.gif");
	background-color:Silver;
	overflow:hidden;
	z-index:5;
}

#header {
	border-bottom:1px solid #000;
}

#header p, #header h1, #header h2 {
	padding:.4em 15px 0 15px;
	margin:0;
}

#layoutdims {
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}

.colmask {
	position:relative;
	clear:both;
	float:left;
	width:100%;
	overflow:hidden;
}

.colright, .colmid, .colleft {
	float:left;
	width:100%;
	position:relative;
}

.col1, .col2, .col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;
	overflow:hidden;
}

.threecol {
	background:#eee;
}

.threecol .colmid {
	right:25%;
	background:#fff;
}

.threecol .colleft {
	right:50%;
	background:#eee;
}

.threecol .col1 {
	width:46%;
	left:102%;
}

.threecol .col2 {
	width:21%;
	left:31%;
}

.threecol .col3 {
	width:21%;
	left:85%;
}

#footer {
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #000;
	text-align: center;
}

#footer p {
	padding:10px;
	margin:0;
}

ul#mymenu,ul#mymenu ul {
	margin:0;list-style:none;background-color:#000;background-image:url("images/mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;
}
	
ul#mymenu ul {
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;padding:0 9px 9px;background-color:#333333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;
}
ul#mymenu li:hover>* {
	display:block;
}

ul#mymenu li:hover {
	position:relative;
}

ul#mymenu ul ul {
	position:absolute;left:100%;top:0;
}

ul#mymenu {
	padding:1px 1px 1px 0;display:block;font-size:0;float:left;
}

ul#mymenu li {
	display:block;white-space:nowrap;font-size:0;float:left;
}

ul#mymenu>li,ul#mymenu li {
	margin:0 0 0 1px;
}

ul#mymenu ul>li {
	margin:1px 0 0;
}

ul#mymenu a:active, ul#mymenu a:focus {
	outline-style:none;
}

ul#mymenu a,ul#mymenu a.pressed {
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#cccccc;cursor:default;
}

ul#mymenu ul li {
	float:none;margin:9px 0 0;
}

ul#mymenu ul a {
	text-align:left;padding:8px 0 0 0;background-color:#333333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#cccccc;text-decoration:none;
}

ul#mymenu li:hover>a {
	background-color:#00c4ff;border-style:none;font:bold 12px Arial;color:#ffffff;text-decoration:none;background-image:url("images/mainbk.png");background-position:0 100px;
}

ul#mymenu img {
	border:none;vertical-align:middle;margin-right:10px;
}

ul#mymenu img.over {
	display:none;
}

ul#mymenu li:hover > a img.def {
	display:none;
}

ul#mymenu li:hover > a img.over {
	display:inline;
}

ul#mymenu li a.pressed img.over {
	display:inline;
}

ul#mymenu li a.pressed img.def {
	display:none;
}

ul#mymenu span {
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;
}

ul#mymenu a {
	padding:10px;background-color:#333333;background-image:url("images/mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;color:#cccccc;text-decoration:none;
}

ul#mymenu li:hover>a,ul#mymenu li>a.pressed {
	background-color:#00c4ff;background-image:url("images/mainbk.png");background-position:0 100px;border-style:none;color:#ffffff;text-decoration:none;
}

ul#mymenu ul li:hover>a,ul#mymenu ul li>a.pressed {
	background-color:#333333;background-image:none;border-style:solid;border-color:#262626;font:13px Arial;color:#1f80ae;text-decoration:none;
}

ul#mymenu li.topfirst>a {
	height:16px;line-height:16px;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;
}

ul#mymenu li.topfirst:hover>a,ul#mymenu li.topfirst>a.pressed {
	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;
}

ul#mymenu li.topmenu>a {
	height:16px;line-height:16px;text-shadow:#000000 0px -1px 1px;
}

ul#mymenu li.topmenu:hover>a,ul#mymenu li.topmenu>a.pressed {
	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;
}

ul#mymenu li.toplast>a {
	height:16px;line-height:16px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;
}

ul#mymenu li.toplast:hover>a,ul#mymenu li.toplast>a.pressed {
	line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;
}

ul#mymenu ._>li>a {
	padding:0;
}

ul#mymenu li.subfirst>a {
	border-width:0;border-style:none;padding:0;
}

ul#mymenu li.subfirst:hover>a,ul#mymenu li.subfirst>a.pressed {
	border-style:none;
}

Open in new window

ZenturioAsked:
Who is Participating?
 
Paul MacDonaldConnect With a Mentor Director, Information SystemsCommented:
Try setting the z-index of the container with the DDL to some big number and see if that puts it on top of the other content:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
0
 
ZenturioAuthor Commented:
Thanks that solved my problem.  I just had to set header to position:relative and setting the right z-index to header and content
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.