Edit in JSFiddle

window.addEvent("domready", function(e){
    $$('#navigation > li').addEvents({
        'mouseover': function(event){
            this.setStyle('overflow', 'visible');
        },
        'mouseleave': function(event){
            this.setStyle('overflow', 'hidden');
        }
    }); 
    $$('a').addEvent('click', function(event){
        $('message').set('text', this.href.split("#")[1] + 'がクリックされました');
    });
});

<ul id="navigation" class="clearfix">
    <li>
        <a href="#level1-1">Top1</a>
        <ul>
            <li><a href="#level2-1">Second1</a></li>
            <li><a href="#level2-2">Second2</a></li>
            <li><a href="#level2-3">Second3</a></li>
        </ul>
    </li>
    <li>
        <a href="#level1-2">Top2</a>
        <ul>
            <li><a href="#level2-1">Second1</a></li>
            <li><a href="#level2-2">Second2</a></li>
            <li><a href="#level2-3">Second3</a></li>
        </ul>
    </li>
    <li>
        <a href="#level1-3">Top3</a>
        <ul>
            <li><a href="#level2-1">Second1</a></li>
            <li><a href="#level2-2">Second2</a></li>
            <li><a href="#level2-3">Second3</a></li>
        </ul>
    </li>
</ul>
<div id="message">
    
</div>

#navigation{
    margin-bottom:20px;
    position:relative;
    z-index:2;
}
#navigation > li{
    float:left;
    width:6em;
    height:1.8em;
    overflow:hidden;
}

#navigation > li > a{
    display:block;
    height:1.8em;
    line-height:1.8em;
    background:#ccc;
    text-align:center;
}
#navigation > li > a:hover{
    background:#eee;
}
#navigation > li li{
    background:#ccc;
    padding:3px;
}
#message{
    position:absolute;
    top:50px;
    z-index:1;
    width:24em;
    font-size:11px;
    padding:5px;
    border:1px solid #f00;
    color:#f00;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}