Thanks! That helped some. It's not as messed up as before, but there's still the problem of the formatting. I'm guessing it has something to do with the <ul> <li> tags because now both the expanding and flyout menus look the same. They both look like how the flyout is supposed to look with the exception of the border around the flyout menu.
I've included the code here now, maybe that'll help clear up what I'm clumsily trying to say. I've changed things a bit to make it easier to differentiate between the two menus. The top expanding menu should have a yellow background which changes to a red backgound on rollover. The bottom flyout menu should have a green background with a blue background on rollover. If you take a look both menus still have a green background and both menus flyout on rollover.
If someone could kindly help me on how to make the two menus look and behave as they should, that would be so great!
<!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>Vertical Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// JavaScript Document
startList1 = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("topnav");
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", "");
}
}
}
}
}
startList2 = 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=function() {
startList1();
startList2();
}
</script>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:x-small;
}
* html body{
font-size:xx-small;
f\ont-size:x-small;
}
/*---TOP EXPANDING MENU--*/
ul {
margin: 0;
padding: 0;
list-style: none;
width:150px
}
ul li {
position: relative;
width:148px;
border: 1px solid #ccc;
}
/* keep folowing styles together..........................*/
* html ul ul {
margin-left:-16px;/* ie5 fix */
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul li {float:left;/* hide float from ie5*/}
* html ul ul {
width:148px;
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul ul {margin-left:0;/* hide margin from ie5*/}
/* keep above styles together .............*/
li ul {
display:none;
background:#ffffcc
}
li ul li{border:none;}
/* Styles for Menu Items */
ul li a {
display:block;
text-decoration: none;
color: #777;
background: #ffffcc ;
line-height:2em;
height:2em;
padding:0 5px
}
/* this sets all hovered lists to red */
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
color: #fff;
background-color: red;
}
/* set dropdown to default */
li:hover li a, li.over li a {
color: #777;
background-color: #fff;
}
li ul li a { } /* Sub Menu Styles */
li:hover ul, li.over ul { display:block } /* The magic */
/*--BOTTOM FLYOUT MENU--*/
ul {
margin: 0;
padding: 0;
list-style: none;
width:150px
}
ul li {
position: relative;
width:148px;
border: 1px solid #ccc;
}
/* keep folowing styles together..........................*/
* html ul ul {
margin-left:-16px;/* ie5 fix */
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul li {float:left;/* hide float from ie5*/}
* html ul ul {
width:150px;
w\idth:148px;
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul ul {margin-left:0;/* hide margin from ie5*/}
/* keep above styles together .............*/
li ul {
position: absolute;
top: 0;
left:-999em;
}
/* Styles for Menu Items */
ul li a {
display:block;
text-decoration: none;
color: #777;
background: #99cc66; /* IE6 Bug */
line-height:2em;
height:2em;
padding:0 5px
}
/* this sets all hovered lists to blue */
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
color: #fff;
background-color: blue;
}
/* set dropdown to default */
li:hover li a, li.over li a {
color: #777;
background-color: #fff;
}
li ul li a { } /* Sub Menu Styles */
li:hover ul, li.over ul { left:149px; } /* The magic */
</style>
</head>
<body>
<table>
<tr><td>
<!--TOP EXPANDING MENU-->
<ul id="topnav">
<li><a href="#">Expanding Menu </a></li>
<li><a href="#">About ↓ </a>
<ul>
<li><a href="#">History </a></li>
<li><a href="#">Team </a></li>
<li><a href="#">Offices </a></li>
</ul>
</li>
<li><a href="#">Services↓ </a>
<ul>
<li><a href="#">Web Design </a></li>
<li><a href="#">Internet Marketing </a></li>
<li><a href="#">Hosting </a></li>
<li><a href="#">Domain Names </a></li>
<li><a href="#">Broadband </a></li>
</ul>
</li>
<li><a href="#">Contact Us↓ </a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<!--BOTTOM FLYOUT MENU-->
<ul id="nav">
<li><a href="#">Flyout Menu </a></li>
<li><a href="#">About </a>
<ul>
<li><a href="#">History </a></li>
<li><a href="#">Team </a></li>
<li><a href="#">Offices </a></li>
</ul>
</li>
<li><a href="#">Services </a>
<ul>
<li><a href="#">Web Design </a></li>
<li><a href="#">Internet Marketing </a></li>
<li><a href="#">Hosting </a></li>
<li><a href="#">Domain Names </a></li>
<li><a href="#">Broadband </a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</td></tr>
</table>
</body>
</html>