?
Solved

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

Posted on 2011-10-10
2
Medium Priority
?
460 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:Zenturio
2 Comments
 
LVL 34

Accepted Solution

by:
Paul MacDonald earned 500 total points
ID: 36942194
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
 

Author Closing Comment

by:Zenturio
ID: 36942373
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question