Coolmenü mit CSS

Webdesign & Technik HTML & CSS
1

Hallo, ich bin gerade dabei, ein coolmenü mit css zu machen. bisher habe ich folgenden code:
CSS

        #navi {
            clear:both;
        }

        #navi .kats .kat {
            float:left;
            margin:0px;
            padding:3px;
            list-style:none;
            display:block;
            margin:0px;
            margin-bottom:0px;
            min-width:100px;
        }

        #navi .kats .kat:hover .elements {
            display:block;
        }

        #navi .kats .kat .elements {
            position:relative;
            list-style:none;
            left:0px;
            top:0px;
            margin:0px;
            padding:0px;
            display:none;
        }

        #navi .kats .kat .elements .element {
            height:25px;
            line-height:25px;
            min-width:100px;
        }

        #content {
            clear:both;
        }

HTML:

    <div id="navi">
        <ul class="kats">
            <li class="kat"><a href="#">Test</a>
                <ul class="elements">
                    <li class="element"><a href="test.html">Test</a></li>
                    <li class="element"><a href="test.html">Test</a></li>
                </ul>
            </li>

            <li class="kat"><a href="#">Test</a>
                <ul class="elements">
                    <li class="element"><a href="test.html">Test</a></li>
                    <li class="element"><a href="test.html">Test</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="content"><p>Test</p></div>

Doch leider legen sich die Menüpunkte nicht über den Text von content, sondern verschieben ihn nach unten. Was muss ich ändern, damit die Menüpunkte über den Text gelegt werden?

2

Das Problem hat sich geklärt. Ich habe einfach für #navi und #navi .kats eine feste höhe gesetzt.