Tabelle mit CSS oder HTML?

    Hi,
    nun eine Frage: ich Brauche ein horizontales Navigationsmenü. Das sollte möglichst schlicht sein (schwarz geht auch). Außerdem braucht dieses Unterkategorien. Muss man dieses In einen Frameset machen? Ne, oder? Und ich suche danach schon ewig, da ich nicht viel Ahnung mit CSS habe. Kann mit jemand so einen Code geben oder einen Link geben, wo s kurz beschrieben ist (eventuel auch schon fertig, damit ist das Menü gemeint?). Danke Leute. Ciao,
    prenner

    Hey ich hab hier den Code ich denke das könntest du gebrauchen... farben u alles die beschriftung kannst du nat ändern ich hab das mal auf meine homepage hochgeladen kannst dir mal angucken obs dir gefällt...
    <!-- m --><a class="postlink" href="http://lauras93.la.funpic.de/bsp">http://lauras93.la.funpic.de/bsp</a><!-- m -->




    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-script-type" content="text/javascript">
    <meta http-equiv="content-style-type" content="text/css">
    <title>Foldoutmenue Horizontal</title>


    <style type="text/css" media="screen">
    <!--
    body
    {
    font-family: Verdana, sans-serif;
    font-size: 14px;
    overflow: auto;
    padding: 10px;
    margin: 0px;
    }


    ul, li
    {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    }


    .menu
    {
    position: absolute;
    z-index: 3;
    top: 10px;
    }


    .menu li
    {
    width: 140px;
    float: left;
    }


    .menu a
    {
    border: 1px solid #888;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    cursor: default;
    margin: 0px 2px;
    display: block;
    height: 20px;
    color: #000;
    }


    .menu a:hover
    {
    background-color: #ccc;
    }


    #smenu1, #smenu2, #smenu3, #smenu4
    {
    font-size: 12px;
    display: none;
    width: 140px;
    float: left;
    }


    #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
    {
    font-weight: normal;
    padding-top: 2px;
    border-top: 0px;
    cursor: pointer;
    }
    //-->
    </style>


    <script type="text/javascript">
    <!--
    function montre(id)
    {
    with (document)
    {
    if (getElementById)
    getElementById(id).style.display = 'block';
    else if (all)
    all[id].style.display = 'block';
    else
    layers[id].display = 'block';
    }
    }


    function cache(id)
    {
    with (document)
    {
    if (getElementById)
    getElementById(id).style.display = 'none';
    else if (all)
    all[id].style.display = 'none';
    else
    layers[id].display = 'none';
    }
    }
    //-->
    </script>


    </head>
    <body>


    <div class="menu">
    <ul>
    <li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</a>
    <ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
    <li><a href="">Subkategorie 1.1</a></li>
    <li><a href="">Subkategorie 1.2</a></li>
    <li><a href="">Subkategorie 1.3</a></li>
    </ul>
    </li>


    <li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</a>
    <ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
    <li><a href="">Subkategorie 2.1</a></li>
    <li><a href="">Subkategorie 2.2</a></li>
    </ul>
    </li>


    <li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
    <ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
    <li><a href="">Subkategorie 3.1</a></li>
    <li><a href="">Subkategorie 3.2</a></li>
    <li><a href="">Subkategorie 3.3</a></li>
    <li><a href="">Subkategorie 3.4</a></li>
    <li><a href="">Subkategorie 3.5</a></li>
    </ul>
    </li>


    <li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
    <ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
    <li><a href="">Subkategorie 4.1</a></li>
    <li><a href="">Subkategorie 4.2</a></li>
    <li><a href="">Subkategorie 4.3</a></li>
    </ul>
    </li>
    </ul>
    </div>


    </body>
    </html>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden