次のHTMLの「BBB」をクリックした時に、下に展開するメニューを出したいです。

AAA　BBB　CCC　DDD
　　 メニュー1(←展開されるメニュー)
　　 メニュー2(←展開されるメニュー)

ただ、普通に展開すると「ここにウェブページのコンテンツなどが書き込まれます。」がそのまま下にずれてしまいます。

やりたいのは、「ここにウェブページのコンテンツなどが書き込まれます。」の上にクリック時のメニューを展開したいです。(展開メニューの文字が乗っかって上書きされるようなイメージ)

可能でしょうか？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>トップページ</title>
</head>

<body>
    <div id="header">

    <div style="background-color : #b1c4e0">
        <br/>
        <span style="font-size:x-large">
            &nbsp;&nbsp;
            テスト 
        </span>
    </div>

    <table border="1" style="width:100%;background-color : #6068de">
      <tr >
        <td style="width:12%"><div style="text-align:center;color:#ffffff">AAA</div></td>
        <td style="width:12%">
            <div style="text-align:center;color:#ffffff">
                BBB
            </div>
        </td>
        <td style="width:12%"><div style="text-align:center;color:#ffffff">CCC</div></td>
        <td style="width:12%"><div style="text-align:center;color:#ffffff">DDD</div></td>
        <td style="width:52%"><div style="text-align:right;color:#ffffff">EEE&nbsp;&nbsp;&nbsp;</div></td>
      </tr>
    </table>

</div> 

ここにウェブページのコンテンツなどが書き込まれます。

</body>
</html>