Here is the code for CSS dropdowns in tables! Yeah what a pain!
Code:
<html>
<head>
<title>index2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
<style type="text/css">
<!--
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #CCCEEA;
padding: 0px;
}
a {
font-weight: bold;
color: #000;
}
a {
text-decoration: none;
}
li li a {
display: block;
font-weight: normal;
color: #000;
padding: .25em 0px;
border: 1px solid #000;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
li {
float: left;
position: relative;
width: 105px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
cursor: default;
background-color: white;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: #000;
padding: 0em 0px 0em 0px;
border-bottom: 2px solid #000
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: #000;
border: 0 #000;
}
li:hover ul, li.over ul {display: block;}
</style>
<body dontsteal="YES" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="801" height="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7" width="800" alt="">
<ul id="nav">
<li style="width: 122">
<a href="http://www.ksu.edu/sigep/"><img src="index/Home.gif" width="122" height="24" alt="" border="0"></a>
</li>
<li style="width: 116">
<a href="http://www.ksu.edu/creed/"><img src="index/Sigep.gif" width="116" height="24" alt="" border="0"></a>
<ul>
<li><a href="">Creed</a></li>
<li><a href="">Intramurals</a></li>
<li><a href="">Philanthropy</a></li>
</ul>
</li>
<li style="width: 112">
<a href="http://www.ksu.edu/rush/"><img src="index/Recruitment.gif" width="112" height="24" alt="" border="0"></a>
<ul>
<li><a href="">Why Sigep?</a></li>
<li><a href="">Rush Events</a></li>
<li><a href="">Application</a></li>
<li><a href="">Contact Info.</a></li>
</ul>
</li>
<li style="width: 115">
<a href="http://www.ksu.edu/roster/"><img src="index/Roster.gif" width="115" height="24" alt="" border="0"></a>
<ul>
<li><a href="">Executives</a></li>
<li><a href="">Member List</a></li>
</ul>
</li>
<li style="width: 112">
<a href="http://www.ksu.edu/bm/"><img src="index/Balanced_Man.gif" width="112" height="24" alt="" border="0"></a>
<ul>
<li><a href="">BMP</a></li>
<li><a href="">BM Scholarship</a></li>
</ul>
</li>
<li style="width: 113">
<a href="http://www.ksu.edu/history/"><img src="index/History.gif" width="113" height="24" alt="" border="0"></a>
<ul>
<li><a href="">Kansas Beta</a></li>
<li><a href="">National</a></li>
</ul>
</li>
<li style="width: 110">
<a href="http://www.ksu.edu/links/"><img src="index/Links.gif" width="110" height="24" alt="" border="0"></a>
<ul>
<li><a href="">Alumni</a></li>
<li><a href="">Sigep.org</a></li>
</ul>
</li>
</ul>
</td>
<td>
</tr>
</table>
</body>
</html>
I left out a couple images and stuff just so the section that actually has the dropdown in it is seen. If anyone would like to use this and needs some explanation on what does what and how i got this pain in the next to work post here and ill send you the code minus my images and such with a detailed explanation on what does what in the CSS etc. Trial and Error is a pain in the butt, but someone has to do it
__________________
I can read it,
and understand it,
but when i try it everything goes wrong.
Reading master, Coding failure