/* need to set the required dropdown width but this time it goes directly onto the <ul> elements themselves, and the need to be floated in order to appear side by side. We also still need to remove all the default padding, margins and bullets from the <ul>s the same as before */

#menu {
            width: 100%;
            background: #2A4C96;
            float: left;
}

#menu ul {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 141.5px;
            float: left;
            position: relative; /* new declaration */
}

  /* end of first section */

  /* Which now shows the three, top level choices neatly in a line with all their vertical lists below them */

#menu a, #menu h2 {
            font: 13px/16px verdana, arial, helvetica, sans-serif;
            display: block;
            border-width: 1px;
            border-style: solid;
            border-color: #000 #979395 #555 #000;
            margin: 0;
            padding: 5px 4px;
}

#menu h2 {
            color: #000;
            background: #ECBE00;

}

#menu a {
            color: #000;
            background: #ECBE00;
            text-decoration: none;
}

#menu a:hover {
            color: #FFF;   /* colour of drop down text on mouse over */
            background: #2A4C96;
}

  /* end of second section */

  /* this is to ensure any drop down menu goes over the other text rather than pushing it down thw page */

#menu ul ul {   
            position: absolute;
            z-index: 500;
            left: 0; /* new declaration */
}

  /* end of third section */

  /* Hiding and Revealing using :hover */

div#menu ul ul {                  /* hide */
            display: none;
}

div#menu ul li:hover ul {                  /* reveal */
            display: block;
}

body {                                       /* makes hover work in IE */
            behavior: url(csshover.htc);
}