[HTML] [JavaScript] [CSS] ポップアップメニュー

CSSだけじゃ無理。html とか ajax とか js とかのサンプル載せてるサイトはどうしてサンプルに余計な装飾付けんだろうか。分かりにくいだけだのに。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        #popup1 {
            display: none;
            }
        #popup1:target {
            display: block;
            }

        .popup2 div.frame {
            display: none;
            }
        .popup2 a.title:focus + div.frame {
            display: block;
            }

        .popup3 div.frame {
            display: none;
            }
    </style>
    <script type="text/javascript">
    <!--
        function togglePopup(titleElement, frameClass){
            var o = titleElement.nextSibling;
            while (o && !o.getAttribute || (o.getAttribute('class') || o.getAttribute('className')).indexOf(frameClass) == -1){
                o = o.nextSibling;
            };
            if (o){
                var v = o.style.display;
                o.style.display = (!v || v.toLowerCase() == 'none') ? 'block'
                                                                    : 'none';
            }
            return false;
        }
    // -->
    </script>
</head>

<body>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div class="popup1">
    <a class="title" href="#popup1">Using :target</a>
    <div class="frame" id="popup1">
        <a href="#">close</a>
        foooooooooooooooooo<br />
        <a href="http://www.google.co.jp/">Google</a>
    </div>
</div>

<div class="popup2">
    <a class="title" href="#" onclick="return false;">Using :focus</a>
    <div class="frame">
        foooooooooooooooooo<br />
        <a href="http://www.google.co.jp/">Google</a>
    </div>
</div>

<div class="popup3">
    <a class="title" href="#" onclick="return togglePopup(this, 'frame')" _onclick="var o = this.nextSibling; while (o && !o.getAttribute || (o.getAttribute('class') || o.getAttribute('className')).indexOf('frame') == -1){ o = o.nextSibling; }; o.style.display = ((!o.style.display || o.style.display == 'none') ? 'block' : 'none'); return false;">Using JavaScript</a>
    <div class="frame extra">
        foooooooooooooooooo<br />
        <a href="http://www.google.co.jp/">Google</a>
    </div>
</div>

</body></html>