Hi Alan,
You have to close your unordered list lags for each CSSMenuWriter instance, otherwise the three sections are being controlled by one, two and three css files respectively.
The </ul> is missing from each menu section:
<ul class="level-0" id="cssmw0">
<li><span><a href="basicguide.html">Basic guide</a></span></li>
<li><span><a href="rateofuse.html">Rate of use</a></span></li>
<li><span><a href="grow_organic.html">Grow organic</a></span></li>
<li><span><a href="grow_orchids.html">Grow orchids</a></span></li>
<li><span><a href="detailiedguide.html">Detailed guide</a></span></li>
<li><span><a href="biggerleaves.html">Bigger plants</a></span></li>
<li><span><a href="biggerleaves.html">Bigger leaves</a></span></li>
<li><span><a href="more flowers.html">More flowers</a></span></li>
<li><span><a href="flowershape.html">Flower shape</a></span></li>
<li><span><a href="exotics.html">Exotics</a></span></li>
<li><span><a href="science.html">Science</a></span></li>
<li><span><a href="specialistplants.html">Specialist plants</a></span></li>
<li><span><a href="indoor.html">Indoor</a></span></li>
<li><span><a href="outdoor.html">Outdoor</a></span></li>
</ul>
Releasing each menu block to its own CSS and js files may upset some of the styling you've done, but once separated the whole thing will respond properly to any changes you make in the future!
Add:
You should also remove the height: 30px; from the 'ul#cssmw rules' in your stylesheets.
ul#cssmw {
background-image: url("../cssmw_images/bg.jpg");
background-repeat: repeat-x;
cursor: default;
height: 30px; // remove this
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 0;
}