hover menu problem

[Latch]

Hi

My problem is I have finally got my Hover menu to work however I want to run one across the top and another across the botttom of my page, with an iframe in between. I can get just the top one to work or just the bottom, not both.

ta Latch

not sure if it a css problem or html

css
<style type="text/css">
<!--

#dmenu {
font-family: Arial;
font-size:11px;
}

#dmenu ul+body {
margin:0;
padding:0;
width:150px;
}

#dmenu li {
width:150px;
list-style-type:none;
float:left;
border:1px solid #E6E6FA
}

#dmenu li a{
width:150px;
border:1px solid #F8F8FF;
display:block,
background-color:#DCDCDC;
}

#dmenu li ul {
list-style-type:none;
position:absolute;
margin: 0;
padding:0;
display:none;
width:200px;
}

#dmenu ul li a{
display:block;
border:1px solid #000000;
background-color:#D3D3D3;
width:200px;
}

#dmenu li:hover ul , #dmenu li.over ul{
display: block;

}

#dmenu <ul {
top: auto;
left: auto;
}

.content { clear: left; }

//-->
</style>

Html
<ul id="dmenu">

<li>
<a href="">Getting Started</a>
<ul>
<li><a href="">We'll Come To You</a></li>
<li><a href="">Join Online</a></li>
<li><a href="">Trial Membership</a></li>
</ul>
</li>

<li>
<a href="">Group Exercise</a>
<ul>
<li><a href="">Class Description</a></li>
<li><a href="">Timetable</a></li>
<li><a href="">Instructors</a></li>
</ul>
</li>
<li>
<a href="">Personal Training</a>
<ul>
<li><a href="">Trainers</a></li>
<li><a href="">Appraisals</a></li>
<li><a href="">Goal Setting</a></li>
<li><a href="">Programs</a></li>
<li><a href="">One on One</a></li>
<li><a href="">Nutrition Education</a></li>

</ul>
</li>

<li>
<a href="">About Us</a>
<ul>
<li><a href="">Mission</a></li>
<li><a href="">History</a></li>
<li><a href="">Working in the Industry</a></li>

</ul>
</li>
</ul>

<table>

<td colspan="6" width="739">
<Div style="position: centre; top: 290; left: 400; height: 180; width: 739">
<iframe src="Spin_Pic.htm" scrolling=no framborder=0 height=300 width=730 name="Home"></iframe>
</div>

<ul id="dmenu">

<li>
<a href="">Member Service</a>
<ul>
<li><a href="">Business Network</a></li>
<li><a href="">Child Minding</a></li>
<li><a href="">Events</a></li>
<li><a href="">Retail</a></li>
<li><a href="">Refer a Friend</a></li>

</ul>
</li>
<li>
<a href="">Testimonials</a>
<ul>
<li><a href="">Members Toughts</a></li>

</ul>
</li>
<li>
<a href="">Links</a>
<ul>
<li><a href="">Fitness Tasmania</a></li>
<li><a href="">Fitness Australia</a></li>
<li><a href="">Triathlon Tasmania</a></li>
<li><a href="">Polar Heart Rate Monitors</a></li>
<li><a href="">Smart Shape</a></li>
<li><a href="">Tasmanian Endurance Sports</a></li>

</ul>
</li>
<li>
<a href="">Photo Gallery</a>
<ul>
<li><a href="">Member Photos</a></li>

</ul>
</li>

</ul>

[encyclo]

It looks like you are using an id twice - if you run your page through the HTML validator [validator.w3.org] it will indicate that this is an error - an id can only be used once on a page.

You should therefor switch from

id

to

class

, which can be used multiple times. So,

<ul id="dmenu">

becomes

<ul [b]class[/b]="dmenu">

and you need to change the CSS from

#dmenu

to

.dmenu

on all the rules.

Whilst you're about it you should also check your page with the CSS validator [jigsaw.w3.org] as there are a few errors in there, notably with the inline styles associated with the

div

enclosing the iframe.

[Latch]

thanks for that I did the changes however it now tells me that my javascript has an error

<SCRIPT LANGUAGE="javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("dmenu");
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>