Two sets of rollovers working together

trying to get image rollover and text rollover menus to work together

by PaulNLondon

HTML

<div id="pagetitle">BLAH BLAH</div>


        <ul id="imgmenu">
          <li><a href="/groupsandchoirs" class="g-and-c">Groups and Choirs <span></span></a></li>
          <li><a href="#" class="workshops">Workshops <span></span></a></li>
          <li><a href="#" class="news">News <span></span></a></li>
          <li><a href="#" class="performance">Performances<span></span></a></li>
          <li><a href="#" class="links">Links <span></span></a></li>
          <li><a href="#" class="about">About <span></span></a></li>
          <li><a href="#" class="contact">Contact <span></span></a></li>
        
        </ul>

<div id="subtitle">Blah blah blah blah blah</div>
<div id="textmenu">
<a href="/groupsandchoirs" style="color:#006392;"><span style="color:#006392;">Groups&nbsp;and&nbsp;Choirs</a><span style="color:#006392;">&nbsp;|&nbsp;</span><a href="/workshops" style="color:#0087a8;"><span style="color:#0087a8;">Workshops</a><span style="color:#0087a8;">&nbsp;|&nbsp;</span><a href="/news" style="color:#38b3c0;"></span><span style="color:#38b3c0;">News</a><span style="color:#38b3c0;">&nbsp;|&nbsp;</span><a href="/performances" style="color:#4fc3c7;"><span style="color:#4fc3c7;">Performances</a><span style="color:#4fc3c7;">&nbsp;|&nbsp;</span><a href="/links" style="color:#34b694;"><span style="color:#34b694;">Links</a><span style="color:#34b694;">&nbsp;|&nbsp;</span><a href="/about" style="color:#29aa62;"><span style="color:#29aa62;">About</a><span style="color:#29aa62;">&nbsp;|&nbsp;</span><a href="/contact" style="color:#1fa345;"><span style="color:#1fa345;">Contact</a></span></div>

CSS

body {
    font-family: Arial;
}

a {
    text-decoration:none;
}

a:hover {
    text-decoration:none;
}

a:visited {text-decoration:none;}

#wrapper {
    width:800px;
    min-height:600px;
    margin:0px auto;
}

#pagetitle {
    font-family: Arial;
    font-size:40px;
    color:darkblue;
    width:600px;
}


#subtitle {
    display:block;
    font-family: Arial;
    font-size:35px;
    color:darkblue;
    width:550px;
    height:100px;
    margin-top:235px;
    margin-left:310px;
}

#textmenu {
    font-size:22.5px;
    font-family: Arial;
}

#textmenu a:hover {
    border-bottom-style: solid; 
    border-bottom-width: 4px; 
    color:darkblue;
}

#imgmenu {
  list-style: none;
  padding: 0;
  position: relative;
  font-family: Arial;
  font-size: 22.5px;
}
#imgmenu span {
  display: none;
  position: absolute;
}
#imgmenu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}
#imgmenu a:hover {
  background-position: left bottom;
}
#imgmenu a:hover span {
  display: block;
}

#imgmenu .g-and-c {
  width: 176px;
  height: 296px;
  background: pink;
  left: 1px;
  top: -30px;
}

#imgmenu .g-and-c span {
  text-indent: 0;
  left: -1px;
  top: 369px;
  border-bottom-style: solid; 
  border-bottom-width: 4px; 
  color:#006392;
  width:189px;
}

#imgmenu .workshops {
  width: 90px;
  height: 181px;
  background: yellow;
  left: 176px;
  top: 76px;
}
#imgmenu .workshops span {
  text-indent: 0;
  left: 31px;
  top: 263px;
  border-bottom-style: solid; 
  border-bottom-width: 4px; 
  color:#0087a8;
  width:112px;
}

#imgmenu .news {
  width: 90px;
  height: 184px;
  background: lightgreen;
  left: 267px;
  top: 20px;
}
#imgmenu .news span {
  text-indent: 0;
  left: 70px;
  top: 320px;
  border-bottom-style: solid; 
  border-bottom-width: 4px; 
  color:#38b3c0;
  width:56px;
}
#imgmenu .performance {
  width: 131px;
  height: 151px;
  background: khaki;
  left: 356px;
  top: -55px;
}

#imgmenu .performance span {
  text-indent: 0;
  left:...