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:
CSS:
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>
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;
}
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
HTML
HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.
62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER