Vetinari: Dropdownmenü umwandeln - Untermenü in Zeile anzeigen

Beitrag lesen

Hallo,

ich habe folgenden HTML-Seite mit einem Dropdownmenü ohne javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>

<head>
<title>Willkommen</title>
<link href="css/style2.css" rel="stylesheet" type="text/css">
<style type="text/css">

#dropdown
{
    list-style-type: none;
    width: 920px;
    height: 20px;
    margin-left: 0;
    padding: 0;
}

#dropdown li
{
    float: left;
    padding: 0;
    margin: 0 1px 0 0;
    position: relative;
    width: 130px;
    height: 1px;
    z-index: 100;
}

#dropdown li a, #dropdown li a:visited
{
    text-decoration: none;
}

#dropdown dl
{
    position: absolute;
    top: 0;
    left: 0;
    width: 130px; margin: 0; padding: 0;
    background: transparent url(transparency.gif);
}

#dropdown dt {
    background: #B03B44;
    margin: 0;
    font: bold 13px Verdana,Arial,Helvetica;
    border-left: 0px solid #FFFFFF;
    border-bottom: 0px solid #FFFFFF;
    border-top: 0px solid #FFFFFF;
    width: 130px;
    float: left;
}

#dropdown dd
{
    display: none;
    background: transparent url(transparency.gif);
    border-bottom: 1px solid #7B5558;
    clear: left;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font: bold 13px Verdana,Arial,Helvetica;
    text-align: center;
}

#dropdown dt a, #dropdown dt a:visited
{
    display: block;
    text-align: center;
    font: bold 13px Verdana,Arial,Helvetica;
    color: #ffffff;
    padding: 3px 3px 3px 3px;
    width: 125px;
}

#dropdown dd a, #dropdown dd a:visited
{
    background-color: #B03B44;
    font: bold 13px Verdana,Arial,Helvetica;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 4px 5px 4px 8px;
    width: 118px;
}

#dropdown li a:hover
{
    border: 0;
}

#dropdown li:hover dd, #dropdown li a:hover dd
{
    display: block;
    width: 130px;
    background-color: #B03B44;
    color: #000000;
}

#dropdown li:hover dl, #dropdown li a:hover dl
{
    width: 130px;
}

#dropdown li:hover dt a, #dropdown li a:hover dt a, #dropdown dd a:hover
{
    background-color: #B03B44;
    color: #000000;
}
</style>
</head>

<body>

<div id="top">
<div id="navi_block">
        <ul id="dropdown">
            <li>
            <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
            <dl class="first">
                <dt><a href="front_content.php?idart=8&idcat=1">Startseite</a></dt>
            </dl>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
            <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
            <dl class="second">
                <dt><a href="">Link1</a></dt>
            <dd><a href="">Link1a</a></dd>
            <dd><a href="">Link1b</a></dd>
            <dd><a href="">Link1c</a></dd>
            <dd><a href="">Link1d</a></dd>
            <dd><a href="">Link1e</a></dd>
            </dl>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
            <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
            <dl class="third">
                <dt><a href="">Link2</a></dt>
            <dd><a href="">Link2a</a></dd>
            <dd><a href="">Link2b</a></dd>
            <dd><a href="">Link2c</a></dd>
            <dd><a href="">Link2d</a></dd>
            <dd><a href="">Link2e</a></dd>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
            <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
            <dl class="fourth">
             <dt><a href="">Link3</a></dt>
            <dd><a href="">Link3a</a></dd>
            <dd><a href="">Link3b</a></dd>
            </dl>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
            <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
            <dl class="fifth">
             <dt><a href="">Link4</a></dt>
            <dd><a href="">Link4a</a></dd>
            <dd><a href="">Link4b</a></dd>
            <dd><a href="">Link4c</a></dd>
            <dd><a href="">Link4d</a></dd>
            </dl>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
            <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
            <dl class="sixth">
             <dt><a href="">Link5</a></dt>
            <dd><a href="">Link5a</a></dd>
            <dd><a href="">Link5b</a></dd>
            </dl>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
            <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
            <dl class="seventh">
             <dt><a href="">Link6</a></dt>
            </dl>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
    </div>
    <div id="main">
        <br><br><br><br>
        Inhalt
        <br><br><br><br>
    </div>
</div>
<div id="bottom">
    <a class="foot" href="">Impressum</a>&nbsp;&nbsp;<b>&middot;</b>&nbsp;&nbsp;
    <a class="foot" href="">Kontakt</a>&nbsp;&nbsp;<b>&middot;</b>&nbsp;&nbsp;
    <a class="foot" href="">Links</a><br><br>
</div>

</body>
</html>

ich möchte gerne, dass das untermenü als zeile unter der hauptmenü-zeile angezeigt wird (siehe: www.bild.de). kann mir jemand sagen, wie ich die css anpassen muss, damit das bei mir auch so erscheint?

Danke und Gruss, Martin