ht1815
05-02-2006, 11:18 AM
I'm developing a horizontal cascading menu, using css. My drop down menus are sliding in below the other elements on the page, though. The code I'm using as an example works fine, in that the menus open on top of the rest of the page content. I can't see what I'm missing, though. Can anyone offer any insight? Here's the css code:
<style><!--
body {font: 100% "Times New Roman", sans-serif;}
body {behavior: url(csshover.htc);}
#header {padding: 1em; /*border: 1px solid;*/}
#header h1.logo {text-align: center; margin: 5px;
color: silver; height: 52px; padding-top: 5px; padding-bottom: 5px;
background: url(/php_lib/images/lhn_logo_horz.gif) 50% 50% no-repeat;
background-color: #003399;}
#header h1.logo span {position: absolute; left: -50em; width: 50em;}
#header h1.site {text-align: center; font-family: 85% Verdana, Arial;
margin: 20px 0 10px 0; padding: 10px;}
#theform {border: 3px; border-color: #FFF;
border-style: ridge;
width: 80%; margin: auto;
padding: 0; font: bold 1em Verdana, Arial;}
#theform p {margin: 2px; padding-left: 5em; padding-top: 1em;}
#theform p span {font-size: small;}
#theform p.btn {padding: 6px; position: relative; left: 40%;}
#theform p.result {margin: 2px; padding-left: 5em;
padding-bottom: 1em;}
#theform h3.results {text-decoration: underline; padding-left: 4em;
color: #0000FF; margin: 0; padding-bottom: 0;}
/*div#nav {float: left; margin: 0 10em 50px 0;}*/
div#nav {float: left; margin: 0 10em 0 0;}
div#nav ul {margin: 0; background: white;
border: 1px solid #CCC; border-width: 0 1px;}
div#nav li {position: relative; list-style: none; margin: 0;
float: left; width: 15em; line-height: 1em; font-size: 12px;
line-height: 20px; background-color: #CCC;
border: 1px solid; border-color: #FFF #333 #333 #FFF;
white-space: nowrap;}
div#nav li:hover {background-color: #CCC;}
div#nav li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;
background-color: #CCC;}
div#nav li.submenu:hover {background-color: #FFF;}
div#nav li a {display: block; padding: 0 20px 0 20px;
text-decoration: none;
font-weight: bold; color: #333;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; width: 12em;
display: none;}
div#nav ul ul li {border-bottom: 1px solid #333;}
div#nav li.submenu li.submenu {background: url(submenu.gif)
95% 50% no-repeat;}
div#nav li.submenu li.submenu:hover {background-color: #FFF;}
div#nav li.submenu li.submenu:hover {background-color: #FFF;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
div#nav ul.level2 {top: 20px; left: -2px;}
div#nav ul.level3 {top: -1px; left: 7em;
border-top: 1px solid #CCC;}
--></style>
And here's the page html:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HBB Component Barcode Labels Processor</title>
<script language="JAVASCRIPT" type="text/javascript">
<!-- Hide script from old browsers
/* Function to validate the form */
function validateForm(){
if(frmBBLabels.product.selectedIndex==0){
alert("You must select a Product.");
return false;
}
if(frmBBLabels.printer.selectedIndex==0){
alert("You must select a Printer.");
return false;
}
}
--></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form name="frmBBLabels" action="index.php" method="post" enctype="multipart/form-data" onSubmit="return validateForm();">
<div id="header">
<h1 class="logo"><span>Lutheran Health Network</span></h1>
<h1 class="site">Horizon Blood Bank Component Barcode Labels Processor</h1>
</div>
<div id="nav">
<ul class="level1">
<li><a href="index3.php">Print Labels</a></li>
<li class="submenu"><a href="#">Administer Printers</a>
<ul class="level2">
<li><a href="">Add New Printer</a></li>
<li><a href="">Delete Printer</a></li>
</ul>
</li>
<li class="submenu"><a href="#">Administer Products</a>
<ul class="level2">
<li><a href="">Delete Product</a></li>
<li><a href="">Add New Product</a></li>
<li><a href="">Modify Product</a></li>
</ul>
</li>
</ul>
</div>
<div id="theform">
<span id="mainform">
<p class="product">Product:
<select name="product">
<option>Select a Product</option>
</select>
</p>
<p>Number of Labels:
<select name="nbrlabels">
<option>30</option>
<option>60</option>
<option>90</option>
<option>120</option>
<option>150</option>
<option>300</option>
</select>
</p>
<p>Printer:
<select name="printer">
<option>Select a Printer</option>
</select>
</p>
</span>
<p class="btn">
<input type="submit" name="printl" value="Print Labels">
</p>
</div>
</form>
</body>
</html>
<style><!--
body {font: 100% "Times New Roman", sans-serif;}
body {behavior: url(csshover.htc);}
#header {padding: 1em; /*border: 1px solid;*/}
#header h1.logo {text-align: center; margin: 5px;
color: silver; height: 52px; padding-top: 5px; padding-bottom: 5px;
background: url(/php_lib/images/lhn_logo_horz.gif) 50% 50% no-repeat;
background-color: #003399;}
#header h1.logo span {position: absolute; left: -50em; width: 50em;}
#header h1.site {text-align: center; font-family: 85% Verdana, Arial;
margin: 20px 0 10px 0; padding: 10px;}
#theform {border: 3px; border-color: #FFF;
border-style: ridge;
width: 80%; margin: auto;
padding: 0; font: bold 1em Verdana, Arial;}
#theform p {margin: 2px; padding-left: 5em; padding-top: 1em;}
#theform p span {font-size: small;}
#theform p.btn {padding: 6px; position: relative; left: 40%;}
#theform p.result {margin: 2px; padding-left: 5em;
padding-bottom: 1em;}
#theform h3.results {text-decoration: underline; padding-left: 4em;
color: #0000FF; margin: 0; padding-bottom: 0;}
/*div#nav {float: left; margin: 0 10em 50px 0;}*/
div#nav {float: left; margin: 0 10em 0 0;}
div#nav ul {margin: 0; background: white;
border: 1px solid #CCC; border-width: 0 1px;}
div#nav li {position: relative; list-style: none; margin: 0;
float: left; width: 15em; line-height: 1em; font-size: 12px;
line-height: 20px; background-color: #CCC;
border: 1px solid; border-color: #FFF #333 #333 #FFF;
white-space: nowrap;}
div#nav li:hover {background-color: #CCC;}
div#nav li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;
background-color: #CCC;}
div#nav li.submenu:hover {background-color: #FFF;}
div#nav li a {display: block; padding: 0 20px 0 20px;
text-decoration: none;
font-weight: bold; color: #333;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; width: 12em;
display: none;}
div#nav ul ul li {border-bottom: 1px solid #333;}
div#nav li.submenu li.submenu {background: url(submenu.gif)
95% 50% no-repeat;}
div#nav li.submenu li.submenu:hover {background-color: #FFF;}
div#nav li.submenu li.submenu:hover {background-color: #FFF;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
div#nav ul.level2 {top: 20px; left: -2px;}
div#nav ul.level3 {top: -1px; left: 7em;
border-top: 1px solid #CCC;}
--></style>
And here's the page html:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HBB Component Barcode Labels Processor</title>
<script language="JAVASCRIPT" type="text/javascript">
<!-- Hide script from old browsers
/* Function to validate the form */
function validateForm(){
if(frmBBLabels.product.selectedIndex==0){
alert("You must select a Product.");
return false;
}
if(frmBBLabels.printer.selectedIndex==0){
alert("You must select a Printer.");
return false;
}
}
--></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form name="frmBBLabels" action="index.php" method="post" enctype="multipart/form-data" onSubmit="return validateForm();">
<div id="header">
<h1 class="logo"><span>Lutheran Health Network</span></h1>
<h1 class="site">Horizon Blood Bank Component Barcode Labels Processor</h1>
</div>
<div id="nav">
<ul class="level1">
<li><a href="index3.php">Print Labels</a></li>
<li class="submenu"><a href="#">Administer Printers</a>
<ul class="level2">
<li><a href="">Add New Printer</a></li>
<li><a href="">Delete Printer</a></li>
</ul>
</li>
<li class="submenu"><a href="#">Administer Products</a>
<ul class="level2">
<li><a href="">Delete Product</a></li>
<li><a href="">Add New Product</a></li>
<li><a href="">Modify Product</a></li>
</ul>
</li>
</ul>
</div>
<div id="theform">
<span id="mainform">
<p class="product">Product:
<select name="product">
<option>Select a Product</option>
</select>
</p>
<p>Number of Labels:
<select name="nbrlabels">
<option>30</option>
<option>60</option>
<option>90</option>
<option>120</option>
<option>150</option>
<option>300</option>
</select>
</p>
<p>Printer:
<select name="printer">
<option>Select a Printer</option>
</select>
</p>
</span>
<p class="btn">
<input type="submit" name="printl" value="Print Labels">
</p>
</div>
</form>
</body>
</html>